Google Chart CLJS Clojure

Question

我試圖在Google圖表中使用這個example。到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})) 

Answer 1

有幾個挑戰，使用谷歌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))))) 

需要調用一個draw HTML元素：

如果組件具有安裝在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例子做）的。

設置數據源

我建議一個方便的方法用於獲取數據源：

(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)))) 

使用它

現在你可以使用你的圖表反應值！

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

完整代碼清單是 https://github.com/timothypratley/google-chart-example