Chart.js不能在我的頁面上工作？

我想在wordpress網站上使用chart.js。我可以通過文檔獲得簡單的條形圖，但沒有其他的。即使我只是將JSFiddle中的代碼直接複製到我的頁面，我也無法得到一個餡餅或甜甜圈或線條或雷達圖表來渲染。Chart.js不能在我的頁面上工作？

請參閱此頁：http://www.sledgeweb.com/2016/05/27/chart-test/

應該有一個餅圖，然後條形圖。條形圖工作，但餅圖畫布空白。這是怎麼回事？

來源

2016-05-27 sledgeweb

如果你打F12，並期待在控制檯，你會看到沒有包含chart.js。 –

頂部的chart.js鏈接是否有問題？我將它連接到異地。但是，我很困惑，因爲條形圖確實出現了......如果沒有chart.js被包括在內，我不確定它能做什麼？ – sledgeweb

看來問題在於你包含來自github的chart.js。 [看到這個SO帖子]（http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github）。在你的服務器上託管你自己的chart.js副本會更好。 –

問題是您的<script>標記指向GitHub的代碼的原始文本文件。因爲這些文件是「原始的」，所以它們通過標頭Content-Type:text/plain; charset=utf-8和X-Content-Type-Options:nosniff（see this question）從服務器發送，它告訴客戶端瀏覽器這些是文本文件，並且它們不是可執行的。某些瀏覽器（如Chrome）會因此而窒息，並且不允許執行JavaScript。如果您更改<script>代碼的src URL ChartJS指向CDN或某個不發送這些標頭的地方，它應該可以正常工作。

來源

2016-05-27 18:40:43

我已經將chart.js移動到我的服務器並鏈接了它，但仍然沒有運氣。請刷新。任何其他想法？ – sledgeweb

看起來像現在的圖表工作。我在控制檯中看到的唯一錯誤是您正在使用不存在的.live（）。 jQuery的文檔說舊版本應該使用'.delegate（）'而不是'.live（）'。 –

你有錯誤，你的JavaScript，您可以通過按下F12看到他們在控制檯，它們是：基礎上

Uncaught TypeError: (intermediate value).Pie is not a function(anonymous function)

Uncaught TypeError: $(...).live is not a function

，並調查這些代碼行，你圖表數據和呼叫不匹配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 
});

希望幫助！

來源

2016-05-27 20:01:56

謝謝。我已更新使用您的代碼。完全相同的結果。條形圖顯示，但沒有餅圖。任何想法爲什麼？ – sledgeweb

其實，我懂了。不知道發生了什麼，但是我在此處複製代碼時插入了段落中斷。消除後，我得到了一個餅圖來顯示！謝謝。 – sledgeweb

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

來源

2017-08-17 07:39:41

Chart.js不能在我的頁面上工作？

回答

相關問題