同一页面中的多个图表 [英] multiple chartjs in the same page

问题描述

我正在尝试使用 chartjs可以在此链接中找到 www.chartjs.org

hi i was trying to use chartjs can be found in this link www.chartjs.org

我尝试使用示例代码在同一页面中绘制两个图表

i tried to draw two chart in the same page using the samples code

我用两个不同的 id 创建了两个不同的 div

i created two different div with two different ids

喜欢这个

<div id="chart1"></div>
<div id="chart2"></div>

然后在包含这一行之后:

then after including this line :

我以这种方式创建了第一个图表:

i created the first chart this way:

 window.onload = function(){
    var ctx1 = document.getElementById("chart1").getContext("2d");
    window.myLine = new Chart(ctx1).Line(lineChartData, {
        responsive: true
    });
}

第二个图表这样:

   window.onload = function(){
        var ctx2 = document.getElementById("chart2").getContext("2d");
        window.myPie = new Chart(ctx2).Pie(pieData);
    };

用于两个图表的数据与示例相同，因此没有任何变化但如果我只画一张图表，效果很好如果我同时放置两个图表，我只会得到饼图

data used for both chart is the same like as samples , so nothing changed but if i draw just one chart by itself it works great if i put the two chart at the same time i get only the pie chart

你能告诉我问题出在哪里吗我认为这是某种冲突，但我找不到

can you tell me where is the problem please i think it is some sort of conflict , but i can't find it

推荐答案

只使用一个 window.onload

Use only one window.onload

window.onload = function () {
        window.myRadar = new Chart(document.getElementById("canvas1").getContext("2d")).Radar(radarChartData, {
            responsive: true
        });
        var G2 = document.getElementById("canvas2").getContext("2d");
        window.myBar = new Chart(G2).Bar(barChartData, {
            responsive: true
        });
    }

这篇关于同一页面中的多个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！