尝试从chart.js创建内容

Question

总菜鸟在这里。 想要包括不是jQuery的JS库。 看到chart.js ，它看起来很酷。 但是，我很难显示甜甜圈图。 为什么？ 无论如何，这是我的步骤及其背后的相应代码：

1. 我去了Chart.js GitHub，复制并粘贴了chart.js文件，并将其保存为我自己的文件。 （ https://github.com/nnnick/Chart.js ）

2. 在HTML中包含chart.js。 <script type='text/javascript' src='chart.js'></script>

3. 创建一个150x150的HTML canvas元素。 <canvas id="myChart" width="150" height="150"></canvas>

4. 创建testChart.js文件。

    var ctx = document.getElementById("myChart").getContext("2d"); var data = [ { value: 300, color: "#F7464A", highlight: "#FF5A5E", label: "alpha" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "bravo" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "charlie" } ]; }; var myDoughnutChart = new Chart(ctx[1]).Doughnut(data); 

感谢帮助！

Answer 1

由于代码导致JavaScript错误，因此未显示Chart.js甜甜圈。 不幸的是，Chart.js也依赖于jQuery ...因此，您也需要导入它。

}; // <--- this shouldn't be here

var myDoughnutChart = new Chart(ctx[1]).Doughnut(data);

删除}; 应该修复它。

将来，您可以按照w3学校有关调试JavaScript的文章中所述使用调试工具。

这是您在JSFiddle上的代码的有效版本