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不显示在画布上

回答

相关问题