Javascript 如何在Clojurescript和om中使用Google图表？

我是Clojurescript新手，希望通过基于backbone.js的应用程序移植到Clojurescript+om上。我已经看过了om教程，但我不知道如何在我的clojurescript om ui中使用Google图表的语法等显示图表。其他图表库都有clojurescript绑定，但不幸的是，我的应用程序必须使用Google图表，因为我们的后端正在生成格式为与Google图表一起使用的JSON数据

---

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

使用谷歌图表的方法是，在使用图表容器dom元素id设置

containerId

选项时，创建一个

chartWrapper

对象（请参阅）。 然后，为了绘制图表，只需调用

chartWrapper.draw（）

函数

问题是什么时候绘制图表？
所以我们一定要在元件安装好之后， 装载后将额外元素呈现到dom元素中的om方法是实现

IDIDDMount

协议，因此您的代码应该如下所示：

(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
(did-update [this _ _]
  (let [chart-wrapper (om/get-state owner :chart-wrapper)]
    (.setDataTable chart-wrapper (om/get-props owner))
    (.draw chart-wrapper)))

如果在数据更改时需要重新绘制图表，请执行如下

IDidUpdate

协议：

(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
(did-update [this _ _]
  (let [chart-wrapper (om/get-state owner :chart-wrapper)]
    (.setDataTable chart-wrapper (om/get-props owner))
    (.draw chart-wrapper)))