Javascript 同一页面中有多个ChartJ

嗨，我想用chartjs 可在此链接中找到

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

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

像这样

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

第二张图表是这样的：

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

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

你能告诉我哪里出了问题吗

---

我认为这是某种冲突，但我找不到它

我没有处理过不同类型的图表，但我处理过一个示例，并使用以下代码在一个页面中创建了两个条形图：

在脚本部分，我喜欢这样：

var randomScalingFactor=function（）{return Math.round（Math.random（）*100）}；
var barChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor：“rgba（151187205,0.8）”，
高光填充：“rgba（151187205,0.75）”，
强光笔划：“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}
]
}
变量barChartData2={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor：“rgba（151187205,0.8）”，
高光填充：“rgba（151187205,0.75）”，
强光笔划：“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}
]
}
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx）.Bar（barChartData{
回答：对
});
var ctx2=document.getElementById（“canvas2”）.getContext（“2d”）；
window.myBar=新图表（ctx2）.Bar（barChartData2{
回答：对
});
}

首先，您只需要一个window.onload事件。没有理由有两个单独的例子

第二，饼图和折线图的数据集实际上非常不同

饼图示例数据：

        self.pieData=  [
        {
            value: 65,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "New Scenarios"
        },
        {
            value: 297,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Responses Submitted"
        },
        {
            value: 225,
            color: "#64a789",
            highlight: "#5AD3D1",
            label: "Responses Graded"
        }

    ]

self.lineData= {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "New Tests",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "#64a789",
            pointColor: "#64a789",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Responses",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [128, 148, 140, 119, 186, 127, 190]
        },
        {
            label: "Responses Graded",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "#41e498",
            pointColor: "#41e498",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [108, 116, 120, 112, 136, 121, 111]
        }
    ]
};

折线图示例数据：

        self.pieData=  [
        {
            value: 65,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "New Scenarios"
        },
        {
            value: 297,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Responses Submitted"
        },
        {
            value: 225,
            color: "#64a789",
            highlight: "#5AD3D1",
            label: "Responses Graded"
        }

    ]

self.lineData= {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "New Tests",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "#64a789",
            pointColor: "#64a789",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Responses",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [128, 148, 140, 119, 186, 127, 190]
        },
        {
            label: "Responses Graded",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "#41e498",
            pointColor: "#41e498",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [108, 116, 120, 112, 136, 121, 111]
        }
    ]
};

---

折线图可能没有初始化，因为您向它提供了错误类型的数据

您可以使用jQuery来获取画布对象

var ctx = $parent.find('#' + idOfCanvas).get(0).getContext("2d");

现在确保下面的代码根本没有抛出js错误

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

---

如您所知，如果js中出现任何错误，js运行时将停止后面的所有代码行

仅使用一个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
        });
    }

function myfunc1{
}
function myfunc2{
}
function start(){
myfunc1();
myfunc1();
}
window.onload = start(); 

---

仅使用1个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
        });
    }

function myfunc1{
}
function myfunc2{
}
function start(){
myfunc1();
myfunc1();
}
window.onload = start(); 

参考：

---

我尝试使用此代码。。。这就解决了你的问题

 var barChartData = {
            labels: [<?php echo $str_indiv_value; ?>],
            datasets: [{
                label: 'Dataset 1',
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple,
                    window.chartColors.red
                ],
                yAxisID: 'y-axis-1',
                data: [
                   <?php echo $str_indiv_requred;?>
                ]
            }]

        };

        var barChartData_2 = {
            labels: [<?php echo $str_indiv_value; ?>],
            datasets: [{
                label: 'Dataset 1',
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple,
                    window.chartColors.red
                ],
                yAxisID: 'y-axis-1',
                data: [
                    <?php echo $str_indiv_requred;?>
                ]
            }]

        };


        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Multi Axis'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }],
                    }
                }
            });




            var ctx_2 = document.getElementById('canvas2').getContext('2d');
            window.myBar = new Chart(ctx_2, {
                type: 'bar',
                data: barChartData_2,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Multi Axis'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }],
                    }
                }
            });



        };

var barChartData={
标签：[]，
数据集：[{
标签：“数据集1”，
背景颜色：[
window.chartColors.red，
window.chartColors.orange，
window.chartColors.yellow，
window.chartColors.green，
window.chartColors.blue，
window.chartColors.purple，
window.chartColors.red
],
yAxisID:'y轴-1'，
数据：[
]
}]
};
var barChartData_2={
标签：[]，
数据集：[{
标签：“数据集1”，
背景颜色：[
window.chartColors.red，
window.chartColors.orange，
window.chartColors.yellow，
window.chartColors.green，
window.chartColors.blue，
window.chartColors.purple，
window.chartColors.red
],
yAxisID:'y轴-1'，
数据：[
]
}]
};
window.onload=函数（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js条形图-多轴”
},
工具提示：{
模式：“索引”，
交集：对
},
比例：{
雅克斯：[{
类型：'线性'，//仅线性，但允许刻度类型注册。例如，这允许仅针对日志刻度存在扩展
显示：对，
位置：'左'，
id:'y轴-1'，
}],
}