Chart.js 未正确显示/安装问题答案

【问题标题】：Chart.js not showing correctly/install issuesChart.js 未正确显示/安装问题
【发布时间】：2016-02-16 23:14:32
【问题描述】：

我对 web 开发非常陌生，并试图加载 chart.js，但遇到了一些问题……阅读完文档后，我认为我的所有部分都是正确的，只是顺序错误？

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

之后，您似乎只需要（在正文中的脚本标签中）...

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

然后是实际的数据……

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

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

【问题讨论】：

考虑在您的问题中添加JSFiddle 或runnable code snippet，以便我们实际找出问题所在:)。
谢谢！这是我的小提琴，jsfiddle.net/bencasalino/tfsy6gxL 虽然我正在使用外部库，所以它不会出现，我只是觉得我的所有东西的顺序都是错误的！
“我只是觉得无论哪种方式我都把所有东西的顺序都搞错了！”不知道你的意思是什么......对于那些运行它的人来说，小提琴应该尽可能好地工作:)。 “您在小提琴的 JavaScript 部分中有 HTML 加载 Chart.js，其中JSFiddle 上没有 chart.js/Chart.js（他们的服务器上也不存在 myjs.js）。”因此可能没有帮助，我暂时将它们留在...如果您认为它很好，也可以接受答案:)。

【解决方案1】：

根据您的comment 中提供的fiddle，但不是您的问题，您遇到了一些问题：

小提琴的JavaScript 部分中有HTML <script> 标签。
您正在使用<script type="text/javascript" src="chart.js/Chart.js"></script> 加载Chart.js，而JSFiddle 上没有chart.js/Chart.js（他们的服务器上也不存在myjs.js）。
你有var skillsChart = new Chart(context).Pie(data);之前你的pieData数组，而不是之后。
var skillsChart = new Chart(context).Pie(data); 应该是 var skillsChart = new Chart(context).Pie(pieData);，因为您的数组称为 pieData，而不是 data。

看到这个fiddle。

希望这有帮助！ :)

【讨论】：

啊，非常感谢，我检查了你的 js fiddle 这一切都比我的更有意义。我仍然对你如何让图表实际加载感到困惑。我认为 chart.js 依赖于 chart.js 库来实际加载。当我将所有 js 放在正文底部的脚本标记中时，我可以让它工作。但是当我在标题中外部链接 <script type="text/javascript" src="test.js"></script> 时，它会中断。
@BenjaminCasalino 我不确定你的问题是什么，但希望这些要点会有所帮助......你所需要的只是：1.图书馆，cdn（cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js）或本地. 2.
是的，谢谢你，它现在似乎正在工作。我只是不明白 jsfiddle 如何在不链接到该 chart.js 库的情况下知道要输出什么，但我想它只是想出来了 :) 再次感谢！