谷歌图表 CLJS Clojure

Question

我尝试将example适应于Google图表。使用re-frame框架和reagent创建实时图表，基于订阅。我用一个简单的计数器=+-1进行了测试。

我遇到了错误：Assert failed: Render must be a function, not nil(ifn? render-fun)。

(defn draw-demo-chart 
   [d]
   (let [[columns vectors options chart] (r/children d)
         data (new js/google.visualization.DataTable)]
       (doall ;gotta keep the doall on maps. lazy sequence...
      (map (fn [[type name]]
            (.addColumn data type name)) columns))
      (.addRows data vectors)
      (.draw chart data options)
      (.load js/google "visualization" "1" (clj->js {:packages ["corechart" "orgchart" "calendar" "map" "geochart"]}))     
      (.setOnLoadCallback js/google draw-demo-chart)
      ))


(defn draw-demo-chart-container
    []
    (let [count    (re-frame/subscribe [:count])
          columns  (reaction [["date" "X"] ["number" "Y"]])
          vectors  (reaction (clj->js [[(new js/Date "07/11/14") 145] [(new js/Date "07/12/14") 15]
                                      [(new js/Date "07/13/14") 23] [(new js/Date "07/14/14") 234]]))
          options  (reaction (clj->js {:title (str @count)}))
          chart    (reaction (new js/google.visualization.LineChart (.getElementById js/document "linechart"))) ]
     (fn []
        [draw-demo-graph @columns @vectors @options @chart])))

(def draw-demo-graph 
       (r/create-class {:reagent-render  draw-demo-chart
                        :component-did-mount draw-demo-chart
                        :component-did-update draw-demo-chart}))

- RRR

---

看起来你的方法不太对。这个教程应该会指导你进行必要的调整：https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md - Mike Thompson

正如我之前发布的那样，它可以与d3.js一起使用，我只想创建Google Chart版本。我不知道问题出在哪里，因为在d3.js版本中，我可以轻松地获取数据。但是在Google Chart中却不行。我从许多论坛中得到了这个链接，只是我不明白为什么这种方法在Google Chart中不起作用...我错在哪里呢 :s - RRR

Answer 1

使用Google Charts API存在一些挑战：

1. 它异步加载，只有在准备就绪后才能使用。

建议使用标志记录API是否已准备就绪，这将使其即使在组件挂载后加载API也能呈现。

(defonce ready?
  (reagent/atom false))

(defonce initialize
  (do
    (js/google.charts.load (clj->js {:packages ["corechart"]}))
    (js/google.charts.setOnLoadCallback
      (fn google-visualization-loaded []
        (reset! ready? true)))))

2. 您需要在HTML元素上调用draw：

只有组件已挂载，HTML元素才会存在。您可以使用ref方便地获取HTML元素（否则，您需要在挂载时保存对它的引用，或搜索它）。

(defn draw-chart [chart-type data options]
  [:div
   (if @ready?
     [:div
      {:ref
       (fn [this]
         (when this
           (.draw (new (aget js/google.visualization chart-type) this)
                  (data-table data)
                  (clj->js options))))}]
     [:div "Loading..."])])

每当任何一个输入发生更改时（以上ref示例会这样做），您都需要重新绘制。

3. 设置数据源

我建议使用方便的方法获取数据源：

(defn data-table [data]
  (cond
    (map? data) (js/google.visualization.DataTable. (clj->js data))
    (string? data) (js/google.visualization.Query. data)
    (seqable? data) (js/google.visualization.arrayToDataTable (clj->js data))))

4. 使用它

现在，您可以使用具有响应式值的图表了！

[draw-chart
    "LineChart"
    @some-data
    {:title (str "Clicks as of day " @day)}]

完整的代码清单在https://github.com/timothypratley/google-chart-example上。

- Timothy Pratley