从clojurescript（canvasjs）调用javascript

Question

我将以下对canvas.js的javscript调用转换为clojurescript遇到麻烦：

var chart = new CanvasJS.Chart("chartContainer", {

  title:{
    text: "Fruits sold in First Quarter"              
  },
  data: [//array of dataSeries              
    { //dataSeries object

     /*** Change type "column" to "bar", "area", "line" or "pie"***/
     type: "column",
     dataPoints: [
     { label: "banana", y: 18 },
     { label: "orange", y: 29 },
     { label: "apple", y: 40 },                                    
     { label: "mango", y: 34 },
     { label: "grape", y: 24 }
     ]
   }
   ]
 });

有人可以给我指出正确的方向或提供示例吗？

最好的问候，斯文

Answer 1

您遇到什么问题？ 这是简单的js互操作性：

(def chart (js/CanvasJS.Chart. "chartContainer" (clj->js {
  :title {:text "Fruits sold in First Quarter"}
  :data [{:type "column"
          :dataPoints [{ :label "banana" y: 18 }
                       { :label "orange" y: 29 }
                       { :label "apple"  y: 40 }
                       { :label "mango"  y: 34 }
                       { :label "grape"  y: 24 }]}]})))

编译为：

cljs.user.chart = (new CanvasJS.Chart("chartContainer", cljs.core.clj__GT_js.call(
  null, new cljs.core.PersistentArrayMap(null, 2, [new cljs.core.Keyword(
      null, "title", "title", 1124275658), new cljs.core.PersistentArrayMap(
      null, 1, [new cljs.core.Keyword(null, "text", "text", 1017460895),
        "Fruits sold in First Quarter"
      ], null), new cljs.core.Keyword(null, "data", "data", 1016980252),
    new cljs.core.PersistentVector(null, 1, 5, cljs.core.PersistentVector
      .EMPTY_NODE, [new cljs.core.PersistentArrayMap(null, 2, [new cljs.core
        .Keyword(null, "type", "type", 1017479852), "column", new cljs
        .core.Keyword(null, "dataPoints", "dataPoints", 2200126623),
        new cljs.core.PersistentVector(null, 5, 5, cljs.core.PersistentVector
          .EMPTY_NODE, [new cljs.core.PersistentArrayMap.fromArray([
            new cljs.core.Keyword(null, "label", "label",
              1116631654), "banana", cljs.user.y_COLON_, 18
          ], true, false), new cljs.core.PersistentArrayMap.fromArray(
            [new cljs.core.Keyword(null, "label", "label",
              1116631654), "orange", cljs.user.y_COLON_, 29], true,
            false), new cljs.core.PersistentArrayMap.fromArray([new cljs
            .core.Keyword(null, "label", "label", 1116631654),
            "apple", cljs.user.y_COLON_, 40
          ], true, false), new cljs.core.PersistentArrayMap.fromArray(
            [new cljs.core.Keyword(null, "label", "label",
              1116631654), "mango", cljs.user.y_COLON_, 34], true,
            false), new cljs.core.PersistentArrayMap.fromArray([new cljs
            .core.Keyword(null, "label", "label", 1116631654),
            "grape", cljs.user.y_COLON_, 24
          ], true, false)], null)
      ], null)], null)
  ], null))))

您还可以使用标记了#js的文字并创建简单的js数据（即使看起来更难看）：

(def chart (js/CanvasJS.Chart. "chartContainer" #js{
  :title #js{:text "Fruits sold in First Quarter"}
  :data #js[#js{:type "column"
  ...