想要在同一页上使用不同数据的多个图表

Question

我在我的网站上使用了一个甜甜圈图表插件。它工作正常，但我想在不同的数据在同一页上的多个图表。请参阅下面的代码。

这就是图我使用

<canvas id="chart-area1" width="200" height="200" style="width:150px !important; height:150px !important;"/></canvas> 

脚本是在这里

<script src="http://www.chartjs.org/assets/Chart.min.js"></script> 
<script> 
    var doughnutData = [ 
      { 
       value: 45, 
       color:"#17CB8A", 
       highlight: "#17CB8C", 
       label: "Strating" 
      }, 
      { 
       value: 12, 
       color: "#FF003C", 
       highlight: "#FF003A", 
       label: "Warning" 
      }, 
      { 
       value: 7, 
       color: "#fb6800", 
       highlight: "#fb6801", 
       label: "Past Due" 
      }, 
      { 
       value: 9, 
       color: "#88c100", 
       highlight: "#88c102", 
       label: "In Progress" 
      }, 

     ]; 

     window.onload = function(){ 
      var ctx = document.getElementById("chart-area1").getContext("2d"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     }; 

</script> 

我怎样才能复制此图用不同的属性？

Answer 1

这就是我做到的。与多个画布。

<script> 
    var doughnutData = [ ... ]; 
    var doughnutData2 = [ ... ]; 
    var doughnutData3 = [ ... ]; 

    window.onload = function(){ 
     var ctx = document.getElementById("chart-area1").getContext("2d"); 
     var dtx = document.getElementById("chart-area2").getContext("2d"); 
     var etx = document.getElementById("chart-area3").getContext("2d"); 
     window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     window.myDoughnut2 = new Chart(dtx).Doughnut(doughnutData2, {responsive : true}); 
     window.myDoughnut3 = new Chart(etx).Doughnut(doughnutData3, {responsive : true}); 
    }; 

</script> 

如果您想使用相同的画布多个图表，你可以用叉子FVANCOP没有为chart.js之here