同一页面中的多个chartjs [英] 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

我创建了两个不同的div两个不同的ID

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

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

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
        });
    }

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