如何使用ClojureScript中的新数据更新图表图表?

时间:2016-07-10 13:21:29

标签: charts clojurescript reagent chartist.js

我是ClojureScript的新手,我正在尝试使用新数据更新图表。我正在使用Chartist和Reagent。第一次渲染图表工作正常,但如果我更改了图表函数的数据,则图表不会再次渲染。我已经尝试过与原子不同的东西,并尝试使用chartist的更新功能。这是chartist update api

的链接

到目前为止,这是我的代码:

(ns example.core
  (:require [clojure.browser.repl :as repl]
            [reagent.core :as reagent]
            [cljsjs.chartist]

  ))

(defonce conn
  (repl/connect "http://localhost:9000/repl"))

(defonce results(reagent/atom [1 1 6 15 25] ))
(defonce timespan (reagent/atom ["Mar-2012" "Jun-2012" "Nov-2012" "Oct-2013" "Nov-2014"]))

(def global-state (reagent/atom 0))


(defn show-chart
  [resultsInChart timespaneInChart]
  (let [chart-data {:labels timespaneInChart
                    :series [resultsInChart]}
        options {:width  "700px"
                 :height "380px"}]
    (js/Chartist.Line. ".ct-chart" (clj->js chart-data) (clj->js options))))

(defn chart-component
  []
  (let [some global-state]
    (reagent/create-class
      {:component-did-mount #(show-chart @results @timespan)
       :component-did-update #(show-chart @results @timespan)
       :display-name        "chart-component"
       :reagent-render      (fn []
                              [:div {:class "ct-chart ct-perfect-fourth"}])})))


(defn home-page []
  [:div
    [:div
       [:p [:button {:on-click #(reset! results [1 1 6 15 5]
                                  )} "Change last Value to 5"]
      ]
    ]
  ]
)

(defn run []
  (reagent/render [chart-component](.getElementById js/document "myChart"))
  (reagent/render [home-page](.getElementById js/document "app"))
)

如果有人能提供帮助,会很棒。

更新: 我通过向我的项目添加figwheel来修复它,不知怎的,这解决了问题并且图表得到了更新。我最后还在component-did-update下使用了Chartist的更新功能。这是图形https://github.com/bhauman/lein-figwheel

的链接

0 个答案:

没有答案