javascript - Javascript window.onload 函数未加载 Chart.js 的多个图表

Question

我正在使用 Chart.js 来显示一些图表。当我对饼图使用 onload 函数时，它会在页面上正确加载，当我为条形图添加第二个变量到 onload 时，什么都不会显示。

我的 javascript 代码看起来像这样

    var config = {
    type: 'pie',
    data: {
        datasets: [
            {
        data : [10, 30, 40, 50],
        backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#65b13b",

            ],
        }],
        labels: ["4G", "5G", "Mano"],
    },
        options: {
        responsive: true
    }
};

var barChartData = {
    type: 'bar',
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
            {
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }
        ]
    options: {
        responsive: true

    },

};

window.onload = function() {
    var ctx = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctx, config);
};
    var bctx = document.getElementById("bar-chart").getContext("2d");
    window.myBar = new Chart(bctx, barChartData);
};

我的 html 代码如下所示：

<canvas id="bar-chart" class="chart-holder" height="250" width="538"></canvas>
<canvas id="pie-chart" class="chart-holder" height="250" width="538"></canvas>

我看过其他解决方案，但它们都非常复杂，我觉得这只是一些简单的事情。

标签： javascripthtmlcharts

Answer 1

bar-chart代码在函数之外window.onload。把它放在window.onload函数里面：

window.onload = function() {
    var ctx = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctx, config);

    var bctx = document.getElementById("bar-chart").getContext("2d");
    window.myBar = new Chart(bctx, barChartData);
};