Biểu đồ Google CLJS Clojure

Question

Tôi đã cố gắng điều chỉnh example trong Biểu đồ Google này. Để re-frame khuôn khổ, reagent. Tôi muốn tạo biểu đồ thời gian thực, dựa trên đăng ký. Tôi đã thử nghiệm với một bộ đếm đơn giản = + - 1.

Tôi gặp lỗi: 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

Có một số thách thức đối với việc sử dụng Charts API của Google:

1. Nó tải không đồng bộ và chỉ có thể được sử dụng khi đã sẵn sàng.

Tôi khuyên bạn nên sử dụng cờ để ghi lại liệu API đã sẵn sàng hay chưa, điều này sẽ cho phép nó hiển thị ngay cả khi tải API sau khi thành phần được gắn kết.

(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. Bạn cần phải gọi draw trên một phần tử HTML:

HTML tử sẽ chỉ tồn tại nếu các thành phần đã gắn kết. Bạn có thể sử dụng một số ref để thuận tiện nhận được phần tử HTML (nếu không bạn sẽ cần phải lưu một tham chiếu đến ở trên gắn kết hoặc tìm kiếm nó).

(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..."])]) 

Bạn sẽ muốn vẽ lại bất kỳ lúc nào bất kỳ đầu vào nào thay đổi (ví dụ trên ví dụ ref).

3. Thiết lập nguồn dữ liệu

tôi đề nghị một phương pháp thuận tiện để khai thác nguồn dữ liệu:

(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. Sử dụng số điện thoại

Bây giờ bạn có thể sử dụng biểu đồ của mình với giá trị phản hồi!

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

Full niêm yết đang ở https://github.com/timothypratley/google-chart-example