如何使用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();
};