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

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

我就是这样做的。有多个 Canvas 。

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

如果您想在同一 Canvas 上使用多个图表，您可以使用 FVANCOP 为 Chart.js 所做的分支 here