使用端口在elm中渲染

时间:2016-01-06 05:30:46

标签: elm

我想使用elm的flot.js 2D绘图库。我首先想到的是我为它写了一个原生包装,但似乎不鼓励。因此,我想尝试使用ports将值发送到JavaScript(即在JavaScript端调用flot.js)。这可能吗?

2 个答案:

答案 0 :(得分:2)

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

Snake

Elm会将端口中的基本Elm数据类型转换为另一端的Javascript类型。上面函数签名中的Main_Snake是为了说明空值可用于分隔Flot中的线段(参见示例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 ]

Maybe

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

答案 1 :(得分:1)

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