javascript - Chart.js 未正确显示/安装问题

Question

我是网络开发新手，正在尝试加载 chart.js，但遇到了一些问题...阅读完文档后，我认为我拥有所有正确的部分，只是顺序有误？

• 通过 nmp 安装 chart.js 并链接到 header 中的脚本，然后添加

<canvas id="myChart" width="400" height="400"></canvas>到 body 。

在那之后你似乎只需要(在正文的脚本标签中)......

var myPieChart = new Chart(ctx[0]).Pie(data,options);

然后是实际数据...

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },  etc......

很遗憾，我在页面上没有看到任何内容。 chart.js 实际上有一些很棒的文档，但我一开始有点迷茫，有什么想法吗？谢谢!

为清楚起见添加了 jsfiddle! https://jsfiddle.net/bencasalino/tfsy6gxL/

和我正在使用的教程 http://www.sitepoint.com/creating-beautiful-charts-chart-js/

Answer 1

基于提供的 fiddle在你的comment ，但不是在你的问题上，你遇到了一些问题:

1. 你有 HTML <script> JavaScript 中的标签 fiddle 的部分。
2. 您正在加载 Chart.js与 <script type="text/javascript" src="chart.js/Chart.js"></script> , 那里没有 chart.js/Chart.js在 JSFiddle (他们的服务器上也不存在 myjs.js)。
3. 你有 var skillsChart = new Chart(context).Pie(data); 之前你的pieData数组，而不是之后。
4. var skillsChart = new Chart(context).Pie(data);应该是 var skillsChart = new Chart(context).Pie(pieData);因为你的数组叫做 pieData , 不是 data .

查看此 fiddle .

希望这对您有所帮助! :)