Javascript 要在同一页上使用不同数据创建多个图表吗

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

这是我正在使用的图表

<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>

var doughnutData=[
{
数值：45，
颜色：“17CB8A”，
亮点：“17CB8C”，
标签：“分层”
},
{
数值：12，
颜色：“FF003C”，
亮点：“FF003A”，
标签：“警告”
},
{
数值：7，
颜色：“fb6800”，
亮点：“fb6801”，
标签：“过期”
},
{
数值：9，
颜色：“88c100”，
亮点：“88c102”，
标签：“进行中”
},
];
window.onload=函数（）{
var ctx=document.getElementById（“图表区域1”）.getContext（“2d”）；
window.myDoughnut=新图表（ctx）.Doughnut（doughnutData，{responsive:true}）；
};

---

如何使用不同的属性复制此图表？

我就是这样做的。有多张画布

<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>

var doughnutData=[…]；
var doughnutData2=[…]；
var doughnutData3=[…]；
window.onload=函数（）{
var ctx=document.getElementById（“图表区域1”）.getContext（“2d”）；
var dtx=document.getElementById（“图表区域2”）.getContext（“2d”）；
var etx=document.getElementById（“图表区域3”）.getContext（“2d”）；
window.myDoughnut=新图表（ctx）.Doughnut（doughnutData，{responsive:true}）；
window.myDoughnut2=新图表（dtx）.Doughnut（doughnutData2，{responsive:true}）；
window.myDoughnut3=新图表（etx）.Doughnut（doughnutData3，{responsive:true}）；
};

---

如果您想在同一画布上使用多个图表，您可以使用fork FVANCOP did for Chart.js

请添加对您正在使用的插件Tanks buddy的引用#奥马尔·邦菲尔。现在它可以正常工作了。非常感谢。