Javascript Chart.js在我的页面上不工作？

我正试图在wordpress网站上使用chart.js。我可以从文档中获得简单的条形图，但没有其他内容。我不能得到一个饼或甜甜圈或线或雷达图来呈现。。。即使我只是将代码从JSFIDLE直接复制到我的页面

请参阅本页：

---

应该有一个饼图，然后是条形图。条形图可以工作，但饼图画布为空。发生了什么事？

问题是您的

标记指向GitHub的原始代码文本文件。因为这些文件是“原始”文件，所以它们是从服务器发送的，标题为

内容类型：text/plain；charset=utf-8

和

X-Content-Type-Options:nosniff

（），它告诉客户端浏览器这些是文本文件，它们不是要执行的。某些浏览器，如Chrome，因此会阻塞，不允许执行JavaScript。如果您将ChartJS的

标记的

src

URL更改为指向CDN或不发送这些标题的地方，它应该可以正常工作。

您的JavaScript出现错误，您可以通过按F12在控制台中看到它们：

未捕获类型错误：（中间值）。饼图不是函数（匿名函数）

未捕获的TypeError:$（…）。live不是函数

基于此，并调查这些代码行，您的图表数据和调用与中的内容不匹配。您可以按照开发人员文档中使用的格式进行操作。像这样的方法应该会奏效：

var pieData = {
    datasets: [{
        data: [
            25,
            10,
            30,
            35
        ],
        backgroundColor: [
            "#811BD6",
            "#9CBABA",
            "#D18177",
            "#6AE128"
        ],
        label: 'My Skills' // for legend
    }],
    labels: [
        "Java",
        "Scala",
        "PHP",
        "HTML"
    ]
};


var context = document.getElementById('skills');
var myPieChart = new Chart(context,{
    type: 'pie',
    data: pieData
});

---

希望有帮助

原因可能是您使用的是最新的chart.min.js，但使用的是旧代码。要获得正确的参考，请遵循chartjs.org文档

最新版本中的代码配置结构已更改。（我猜从2.3开始）

因此，与其

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries).Pie(pieData,pieOptions);

我们的结构如下：

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries,{
  type: 'pie',
  data: 
  {
    labels: ['India', 'Germany', 'Netherland'],
    datasets: 
        [{
        backgroundColor: '#337ab7',
        data: ['100', '99' ,'98'],
        borderWidth:1,
        }]
  },
  options:
  {
      responsive: true,
      maintainAspectRatio:false,
      legend: {
        display: false,
        position: 'top'
      }
  }
});

或

---

如果你点击F12并查看控制台，你会发现chart.js没有被包括在内。顶部的chart.js链接有问题吗？我把它链接到异地。但是，我很困惑，因为条形图确实出现了。。。如果不包括chart.js，我不确定它是否能做到这一点？问题似乎在于您从github中包括chart.js的方式。最好在您的服务器上托管您自己的chart.js副本。我不确定在这种情况下为什么会加载条形图？不管怎样，我现在从我自己的服务器加载js，它看起来完全一样？条形图没有在chrome中加载，因为您包含github chart.js的方式。饼图的问题显示在浏览器控制台中。我已将chart.js移动到我的服务器并将其链接，但仍然不走运。请刷新。还有其他想法吗？看起来图表正在运行。我在控制台中看到的唯一错误是您使用的是不存在的

.live（）

。jQuery的文档说旧版本应该使用

.delegate（）

而不是

.live（）

。谢谢。我已经用你的代码更新了。完全相同的结果。显示条形图，但没有饼图。知道为什么吗？事实上，我让它工作了。不确定发生了什么，但当我在这里复制代码时，插入了一个段落分隔符。在消除这些之后，我得到了一个饼图来显示！非常感谢。

var countries= document.getElementById("countries").getContext("2d");
var pieData = 
{
    labels: ['India', 'Germany', 'Netherland'],
    datasets: [{
      backgroundColor: '#337ab7',
      data: ['100', '99' ,'98'],
      borderWidth:1,
      }]
};
var pieOptions = 
{
    responsive: true,
    maintainAspectRatio:false,
    legend: {
      display: false,
      position: 'top'
    }
};

var chart = new Chart(countries,{    
type: 'pie',
data: pieData,
options: pieOptions
});