javascript - 如何使用 Chart.js API 创建两个饼图？

Question

这是我的 HTML 页面:

    <div>
        <canvas id="chart-area1" width="300" height="300"/>
    </div>
<script src="Chart.js"></script>
<script>

    var pieData1 = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];

        window.onload = function(){
            var ctx1 = document.getElementById("chart-area1").getContext("2d");
            var myPie1 = new Chart(ctx1).Pie(pieData1);

        };



</script>

<div>
        <canvas id="chart-area2" width="300" height="300"/>
    </div>
<script src="Chart1.js"></script>
<script>

    var pieData2 = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];

        window.onload = function(){
            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            var myPie2 = new Chart(ctx2).Pie(pieData2);
        };



</script>

“Chart.js”和“Chart1.js”包含相同的内容。我只用过一次“Chart.js”，但没有用。所以我尝试了两个。

上面的 HTML 页面只显示了一个饼图。另一个饼图不显示，占用页面空间。

要显示两个饼图应该做哪些改动？ 提前致谢。

Answer 1

您将 window.onload 设置为一个值两次，导致它被最新值覆盖:

window.onload = function(){
    var ctx1 = document.getElementById("chart-area1").getContext("2d");
    var myPie1 = new Chart(ctx1).Pie(pieData1);
};
// ...
window.onload = function(){
    var ctx2 = document.getElementById("chart-area2").getContext("2d");
    var myPie2 = new Chart(ctx2).Pie(pieData2);
};

为什么不把这两个功能结合起来呢？

喜欢:

var func1 = function() { /* set up chart 1 */ },
    func2 = function() { /* set up chart 2 */ };

window.onload = function() {
    func1();
    func2();
};