我正在使用Chart.js制作雷达图。我看了关于图表的轨道广播(morris.js),我只是想让示例数据显示在页面上。
当我将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视图文件中。