web-dev-qa-db-fra.com

plusieurs chartjs dans la même page

salut, j'essayais d'utiliser chartjs peut être trouvé dans ce lien www.chartjs.org

j'ai essayé de dessiner deux graphiques dans la même page en utilisant le code des exemples

j'ai créé deux div différents avec deux identifiants différents

comme ça 

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

puis après avoir inclus cette ligne:

j'ai créé le premier graphique de cette façon:

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

et le deuxième graphique de cette façon:

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

les données utilisées pour les deux graphiques sont les mêmes que pour les échantillons, donc rien n'a changé Mais si je ne dessine qu'un graphique par lui-même, cela fonctionne très bien. 

pouvez-vous me dire où est le problème s'il vous plaît Je pense que c'est une sorte de conflit, mais je ne le trouve pas

15
user3388314

Utilisez un seul 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
        });
    }
18
Josué Labaut Bajo

Je n'ai pas travaillé sur différents types de graphiques, mais sur un exemple, j'ai créé deux graphiques à barres dans une page à l'aide de ce code:

<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>

et dans la partie script je fais comme ceci:

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
    });
}
3
MAli Fahimi

Tout d'abord, vous n'avez besoin que d'un seul événement window.onload. Aucune raison d'avoir deux instances distinctes de cela. 

Deuxièmement, les ensembles de données pour les graphiques à secteurs et en courbes sont en réalité très différents. 

Exemple de graphique à secteurs:

        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"
        }

    ]

Exemple de graphique en courbes:

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

Le graphique en courbes n'est probablement pas en cours d'initialisation, car vous lui transmettez le mauvais type de données. 

3
Phil

Utilisez seulement 1 window.onload

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

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

1
Ananda

J'essaie ce code ... cela résout ton problème 

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



        };
0
DeVYaGhI