Question

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

请参阅此页：http://www.sledgeweb.com/2016/05/27/chart-test/

应该有饼图，然后是条形图。条形图有效，但饼图画布为空白。发生了什么事？

Answer 1

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

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

所以，而不是

ValueError: Shapes (900, 10) and (300, 10) are incompatible

我们的结构如下：

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

Answer 2

问题是您的<script>标记指向GitHub的代码原始文本文件。因为这些文件是“原始的”，所以它们是从服务器发送的，标题为Content-Type:text/plain; charset=utf-8和X-Content-Type-Options:nosniff（see this question），它告诉客户端浏览器这些是文本文件但它们不是意味着可执行。某些浏览器（例如Chrome）因此会阻塞并且不允许执行JavaScript。如果您将ChartJS的<script>标记的src网址更改为指向CDN或某个不发送这些标题的地方，则应该可以正常使用。

Answer 3

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

未捕获TypeError :(中间值）.Pie不是函数（匿名函数）

未捕获的TypeError：$（...）。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
});

希望有所帮助！

Chart.js无法在我的页面上工作？

3 个答案: