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 Content-Type:text/plain; charset=utf-8和X-Content-Type-Options:nosniff （ 請參閱此問題 ），它告訴客戶端瀏覽器這些是文本文件，並不意味着它們是可執行文件。 因此，某些瀏覽器（例如Chrome）會阻塞並且不允許執行JavaScript。 如果將ChartJS的<script>標記的src URL更改為指向CDN或不發送這些標頭的位置，則它應該可以正常工作。

Answer 3

您的JavaScript錯誤，您可以通過按F12在控制台中查看它們，它們是：

未捕獲的TypeError ：（中間值）。Pie不是函數（匿名函數）

未捕獲的TypeError：$（...）。live不是函數

基於此，並調查這些代碼行，您的圖表數據和調用與chart.js文檔中的內容不匹配。 您可以按照開發人員文檔中使用的格式來使其工作。 這樣的事情應該起作用：

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

希望有幫助！