Chart.js 在我的页面上不起作用？

Question

我正在尝试在 wordpress 网站上使用 chart.js。我可以从文档中获得简单的条形图，但没有别的。我无法渲染饼图、甜甜圈、折线图或雷达图……即使我只是将代码从 JSFiddle 直接复制到我的页面。

请看这个页面：http://www.sledgeweb.com/2016/05/27/chart-test/

应该有一个饼图，然后是一个条形图。条形图有效，但饼图画布为空白。怎么回事？

Answer 1

原因可能是您使用的是最新的 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'
      }
  }
});

或

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
});

Answer 2

问题是您的 <script> 标签指向 GitHub 的原始代码文本文件。因为这些文件是“原始的”，所以它们是从服务器发送的，带有标题 Content-Type:text/plain; charset=utf-8 和 X-Content-Type-Options:nosniff (see this question)，它们告诉客户端浏览器这些是文本文件，它们不应该是可执行的。因此，某些浏览器（例如 Chrome）会阻塞并不允许执行 JavaScript。如果您将 ChartJS 的 <script> 标签的 src URL 更改为指向 CDN 或不发送这些标头的位置，它应该可以正常工作。

Answer 3

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

未捕获的TypeError：（中间值）。Pie 不是函数（匿名函数）

未捕获的类型错误：$(...).live 不是函数

基于此，并调查这些代码行，您的图表数据和调用与 chart.js docs 中的内容不匹配。您可以按照开发人员文档中使用的格式使其工作。这样的事情应该可以工作：

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
});

希望有帮助！