1

inputDataTable在想自定义 Google DataVisualization 时，我想参数化控件的构造函数，但由于某种原因，当我将它作为参数传递时它似乎不起作用。

这是我使用的默认数据：

module Example = 
  let headers = [|"Country"; "Population (mil)"; "Area (km2)" |]
  let inputDataTable = [|
    [|box "CN"; box 1234000; box 9640821|]
    [|box "IN"; box 1133000; box 3287263|]
    [|box "US"; box 304000; box 9629091|]
    [|box "ID"; box 232000; box 1904569|]
    [|box "BR"; box 187000; box 8514877|]
  |]

在网页上生成图表的代码。

let GeoChart headers inputDataTable =
    Div []
    |>! OnAfterRender (fun container ->
          let dataFormatter = DefaultOptions.NumberFormatter ""
          let options = DefaultOptions.GeoChart
          let visualization = new GeoChart(container.Dom)
          let data = Data.GeoMapData headers inputDataTable
          dataFormatter.format(data, 1)
          visualization.draw(data, options)
        )

“预期”控制。

type GoogleGeoChartViewer(headers, inputDataTable) =
  inherit Web.Control()

  [<JavaScript>]
  override this.Body = 
    Google.Charts.GeoChart headers inputDataTable :> _

并使用基本模板进行测试。

let HomePage =
  let headers = Google.Example.headers 
  let inputDataTable = Google.Example.inputDataTable
  Skin.WithTemplate "HomePage" <| fun ctx ->
      [
          Div [Text "HOME"]
          Div [new Controls.EntryPoint()]
          Div [new Controls.GoogleGeoChartViewer(headers, inputDataTable)]
          Links ctx
      ]

但是，当我使用此代码时：地理图表不会显示。

但是如果我inputDataTable从参数列表中删除并使用：

let GeoChart headers =
    Div []
    |>! OnAfterRender (fun container ->
          let dataFormatter = DefaultOptions.NumberFormatter ""
          let options = DefaultOptions.GeoChart
          let visualization = new GeoChart(container.Dom)
          let inputDataTable = Example.inputDataTable
          let data = Data.GeoMapData headers inputDataTable
          dataFormatter.format(data, 1)
          visualization.draw(data, options)
        )

有用...

然而，该headers阵列不会造成任何问题。

有人知道发生了什么吗？

感谢您的见解。

4

1 回答 1

1

发生的情况是传递给 a 的构造函数的Web.Control值是在页面的服务器端构造期间被序列化为 JSON 的服务器端值。但是， type 没有序列化程序obj，因此您的inputDataTable(of type obj[][]) 的序列化失败。相反，在有效的版本中，inputDataTable是在客户端构建的，因此不需要进行序列化。

如果inputDataTable确实需要来自服务器端，则需要使用可序列化类型。我不确切知道您如何在GeoMapData函数中填充数据对象，但解决方案可能定义inputDataTable如下：

let inputDataTable = [|
    ("CN", 1234000, 9640821)
    ("IN", 1133000, 3287263)
    ("US", 304000, 9629091)
    ("ID", 232000, 1904569)
    ("BR", 187000, 8514877)
  |]

然后在客户端，执行以下操作：

let data = new Base.DataTable()
data.addRows(inputDataTable) |> ignore

诀窍是 WebSharper 在客户端使用 JavaScript 数组表示元组。并且addRows通常需要的方法obj[][]也有需要的重载'T[]。这允许您编写上面正确键入的 F# 代码，并且它编译成完全相同的 JavaScript 代码，就像您传递一个obj[][]. 本例中使用了这个技巧（第 155 行）。

于 2014-11-06T00:02:08.477 回答