javascript - 如何通过 om 在 Clojurescript 中使用 Google 图表？

Question

我是 Clojurescript 新手，希望将基于我的骨干网的应用程序移植到 CLojurescript + om 上。我已经阅读了 om 教程，但我不明白如何在我的 clojurescript om ui 中使用 Google 图表的语法等显示图表。其他图表库具有 clojurescript 绑定，但不幸的是，我的应用程序必须使用 Google Charts，因为我们的后端正在生成格式化为用于 Google Charts 的 JSON 数据。

任何示例应用程序/骨架代码将不胜感激。

Answer 1

当使用您的图表容器 dom-element id 设置选项时，使用 Google 图表的方式是创建一个chartWrapper对象（参见此处） 。containerId然后为了绘制图表只需调用该chartWrapper.draw()函数。

问题是何时绘制图表？
所以确保我们必须在元素挂载后执行此操作，在其挂载后将额外元素渲染为 dom 元素的 om 方式正在实现IDidMount协议，因此您的代码应如下所示：

(defn chart-view [data owner]
  IDidMount
  (did-mount [this]
    (let [wrapper-args (clj->js
                          {:chartType "line-chart"
                           :dataTable data
                           :containerId "chart-container"
                           :options {...}})
         chart-wrapper (js/google.visualization.ChartWrapper. wrapper-args)]
      (om/set-state! owner :chart-wrapper chart-wrapper);keep the wrapper in the state for later access           
      (.draw chart-wrapper))
  IRender
  (render [this]
    (dom/div #js {:id "chart-container"})))

如果需要在数据变化时重新绘制图表，可以IDidUpdate这样实现协议：

IDidUpdate
(did-update [this _ _]
  (let [chart-wrapper (om/get-state owner :chart-wrapper)]
    (.setDataTable chart-wrapper (om/get-props owner))
    (.draw chart-wrapper)))