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 for Chart.js here

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

1 个答案: