Piechart不顯示在畫布上

我剛剛發現了Chart.js，它看起來很神奇！所以我試圖按照一個例子，它不起作用，說new Chart(ctx, options).Pie(data);是無效的（(intermerdiate value).Pie(...)不是一個函數）。然後，我發現版本2中的語法已更改，因此我將其更改爲您在下面找到的內容。我不再有任何錯誤，但沒有任何內容顯示在我的畫布上。Piechart不顯示在畫布上

<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="js/moment-2.10.6.min.js"></script> 
     <script src="js/jquery-2.1.4.min.js"></script> 
     <script src="js/test/Chart.js"></script> 
     <script src="js/test/chart-test.js"></script> 
    </head> 
    <body> 
     <canvas id="myChart" width="400" height="400"></canvas> 
    </body> 
</html>

和腳本：

$(document).ready(function() { 
    var data = [ 
     { 
      value: 5, 
      color: "#44A9FF", 
      highlight: "#FF5A5E", 
      label: "N/A" 
     }, 
     { 
      value: 79, 
      color: "#009900", 
      highlight: "#5AD3D1", 
      label: "On Track" 
     }, 
     { 
      value: 31, 
      color: "#66FF33", 
      highlight: "#FFC870", 
      label: "Done" 
     }, 
     { 
      value: 4, 
      color: "#F3F300", 
      highlight: "#FFC870", 
      label: "Issues" 
     }, 
     { 
      value: 7, 
      color: "#FF0000", 
      highlight: "#FFC870", 
      label: "Behind" 
     }, 
     { 
      value: 9, 
      color: "#979797", 
      highlight: "#FFC870", 
      label: "Abandoned" 
     } 
    ]; 

    var options = { 
     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: true, 
     //String - The colour of each segment stroke 
     segmentStrokeColor: "#fff", 
     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 
     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout: 50, // This is 0 for Pie charts 

     //Number - Amount of animation steps 
     animationSteps: 100, 
     //String - Animation easing effect 
     animationEasing: "easeOutBounce", 
     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 
     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 
     //String - A legend template 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 

    }; 

    var ctx = $('#myChart').get(0).getContext('2d'); 
    var myPieChart = new Chart(ctx, { 
     type: "pie", 
     data: data, 
     options: options 
    }); 
});

來源

2015-11-27 OmniOwl

在小提琴看看 - Pie chart with Chart.js 我做了以下變化： -

var pieChartCanvas = $("#myChart").get(0).getContext("2d"); 
var pieChart = new Chart(pieChartCanvas); 
pieChart.Pie(data, options);

來源

2015-11-27 10:40:16

從你給它看起來像語法也發生了變化的例子。

應該

var myPieChart = new Chart(ctx).Pie(data);

不

var myPieChart = new Chart(ctx, { 
    type: "pie", 
    data: data, 
    options: options 
});

得到了從文檔中發現的例子 - >https://github.com/nnnick/Chart.js/blob/master/samples/pie.html

來源

2015-11-27 09:13:27

但是，當我使用它時，我得到以下錯誤：http://puu.sh/lAnIW/825e750586.png – OmniOwl

如果我複製並粘貼我在該例中看到的東西，我會得到：'（intermediate value）.Pie is不是一個函數，就像我在開篇中所說的那樣。 – OmniOwl

好的，我自己解決了。我用他們的例子去了他們的網站，檢查了資料，看起來他們在內部仍然使用v1，所以我剛剛拿到了，現在我的圖表顯示出來了 – OmniOwl

他們還改變了2.0中的數據格式。如果您結帳樣品here。你會看到的數據是現在這個樣子：

data: { 
     datasets: [{ 
      data: [ 
       ... 
      ], 
      backgroundColor: [ 
       ... 
      ] 
     }/* notice you can have more than one dataset, with pie they interlace when you have more than one */], 
     labels: [ 
      ... 
     ] 
    }

希望幫助....我也需要拉V2.0-Dev分支，並建立它自己闖過一個錯誤，我發現「發佈」版本，所以你可能有更好的運氣！

來源

2015-12-19 06:19:54

Piechart不顯示在畫布上

回答

相關問題