1

我正在使用 Chart.js 制作雷达图。我观看了有关图表 (morris.js) 的 railscast，我只是试图让示例数据显示在页面上。

当我将javascript直接放入html中时，它可以工作：

<body>
<canvas id="canvas" height="450" width="450"></canvas>
<script>

  var radarChartData = {
    labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
    datasets : [
        {
          fillColor : "rgba(220,220,220,0.5)",
          strokeColor : "rgba(220,220,220,1)",
              pointColor : "rgba(220,220,220,1)",
          pointStrokeColor : "#fff",
          data : [65,59,90,81,56,55,40]
          },
          {
          fillColor : "rgba(151,187,205,0.5)",
          strokeColor : "rgba(151,187,205,1)",
          pointColor : "rgba(151,187,205,1)",
          pointStrokeColor : "#fff",
          data : [28,48,40,19,96,27,100]
          }
            ]

        }

    var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});

    </script>
    </body>
</html>

然后我尝试将 javascript 移动到 results.js.coffee 中（我转换为 coffeescript）：

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
radarChartData =
  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Partying", "Running"]
  datasets: [
    fillColor: "rgba(220,220,220,0.5)"
    strokeColor: "rgba(220,220,220,1)"
    pointColor: "rgba(220,220,220,1)"
    pointStrokeColor: "#fff"
    data: [65, 59, 90, 81, 56, 55, 40]
  ,
    fillColor: "rgba(151,187,205,0.5)"
    strokeColor: "rgba(151,187,205,1)"
    pointColor: "rgba(151,187,205,1)"
    pointStrokeColor: "#fff"
    data: [28, 48, 40, 19, 96, 27, 100]
  ]

myRadar = new Chart(document.getElementById("radar_graph").getContext("2d")).Radar(radarChartData,
  scaleShowLabels: false
  pointLabelFontSize: 10
)

但现在图表没有呈现，我不知道为什么。画布仍在 HTML 视图文件中。

4

0 回答 0