Question

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

任何示例应用程序/骨架代码都将深受赞赏。

Answer 1

使用Google图表的方式是在使用chart-container dom-element id设置chartWrapper选项时创建containerId对象（请参阅here）。然后，为了绘制图表，只需调用chartWrapper.draw()函数。

问题是何时绘制图表？
确保我们必须在元素安装后执行此操作，在mount之后将额外元素渲染到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)))

我如何在Clojurescript中使用谷歌图表？

1 个答案: