在 elm 中使用端口进行渲染

Question

我想使用 elm 的 flot.js 二维绘图库。我首先想到我会为它写一个本地包装器，但似乎不鼓励。因此，我想尝试使用端口将要绘制的值发送到 JavaScript（即对 flot.js 的调用将在 JavaScript 端进行）。这可能吗？

Answer 1

我不明白为什么不。您可以在 elm 中构建一个数据结构，其中包含您对 flot.js 的指令（或者在您的情况下可能只是一个点数组），并通过端口将该指令集传递给 javascript 。然后在 javascript 中处理指令并调用 flot.js.

Answer 2

是的，您可以使用端口从 Elm 发送数据以绘制成 Flot 图。这是使用 Elm 作为数据源重写的 Basic Flot Example。

port flotExample1 : List (List (Maybe (List Float)))
port flotExample1 =
  let
    halfStepsTo14 =
      List.map (\x -> x / 2) [0..28]
    d1 =
      List.map (\x -> Just [x, sin x]) halfStepsTo14
    d2 =
      List.map Just [[0, 3], [4, 8], [8, 5], [9, 13]]
    d3 =
      [Just [0, 12], Just [7, 12], Nothing, Just [7, 2.5], Just [12, 2.5]]
  in
    [ d1, d2, d3 ]

Elm 会将端口中的基本 Elm 数据类型转换为另一端的 Javascript 类型。上面函数签名中的 Maybe 是为了说明可以使用空值来分隔 Flot 中的线段（参见示例 d3）

    <script>
        var app = Elm.worker(Elm.Main);

        $(function() {
            $.plot("#placeholder", app.ports.flotExample1);
        });
    </script>

您可以制作更复杂的示例，例如从 Elm 访问服务器 URL 或绑定其他信号，例如时间或鼠标移动（在这种情况下，您的端口签名将是 Signal (List (List (Maybe (List Float))))），但是它仍将全部围绕端口。

在 elm 中使用端口进行渲染

Use ports for rendering in elm

elm