在ClojureScript中使用c3.js实现图表失败，求助解决渲染问题

云原生阿岚

2026-7-8

问题修复方案

你的代码里有两个关键问题导致C3图表无法渲染，逐一修正即可：

1. 错误使用Canvas元素而非Div

C3.js需要绑定到普通<div>元素（它会自动在内部生成SVG绘制图表），<canvas>是Chart.js这类库的用法，你这里混淆了两个库的DOM要求。

2. DOM元素ID错误

你在Reagent渲染函数里给元素设置的:id "#chart"是错误的——#是CSS选择器前缀，元素实际ID应为"chart"，C3的:bindto配置里的"#chart"是用来选择这个ID的元素的。

修正后的完整代码

(defn new-chart[] 
  (println "Inside new chart ") 
  (let [c3-version (.-version js/c3)
        _ (println c3-version) 
        config-map {:bindto "#chart"
                    :data {:columns
                           [["data1" 30 200 100 400 150 150]
                            ["data2" 50 20 10 40 15 25]]}} 
        _ (println "Config map " config-map) 
        myjs (clj->js config-map)]
    (.generate js/c3 myjs)))

(defn rev-chartjs-component [] 
  (reagent/create-class {:component-did-mount #(new-chart)
                         :display-name "chartjs-component"
                         :reagent-render (fn []
                                           (println "Inside render function")
                                           [:div {:id "chart" :style {:width "700px" :height "380px"}}])}))

;; 调用组件
[rev-chartjs-component]