Question

您好我正在尝试使用chartjs 可在此链接www.chartjs.org

中找到

我尝试使用示例代码

在同一页面中绘制两个图表

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

像这样

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

然后包括这一行：

我用这种方式创建了第一张图表：

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

用于两个图表的数据与样本相同，因此没有任何变化但是，如果我自己只绘制一个图表，那么效果很好如果我同时把两张图表放在一起，我只得到饼图

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

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

Answer 2

我没有在不同类型的图表上工作，但我在一个例子中使用此代码在页面中创建了两个条形图：

<div style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

<div style="width: 50%">
    <canvas id="canvas2" height="450" width="600"></canvas>
</div>

在脚本部分我喜欢这样：

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
    var barChartData2 = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
    var ctx2 = document.getElementById("canvas2").getContext("2d");
    window.myBar = new Chart(ctx2).Bar(barChartData2, {
        responsive : true
    });
}

Answer 3

首先，您只需要一个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]
        }
    ]
};

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

Answer 4

仅使用1个window.onload

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

价： http://www.htmlgoodies.com/beyond/javascript/article.php/3724571/Using-Multiple-JavaScript-Onload-Functions.htm

Answer 5

我尝试这段代码...这样可以解决您的问题

 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',
                        }],
                    }
                }
            });



        };

Answer 6

您可以使用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-runtime将停止所有后面的代码行

同一页面中的多个chartjs

6 个答案: