從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"
  ...