plusieurs chartjs dans la même page

salut j'ai essayé d'utiliser chartjs
peuvent être trouvés dans ce lien www.chartjs.org

j'ai essayé de dessiner deux dans le tableau de la même page en utilisant les échantillons de code

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

comme ce

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

puis après, y compris cette ligne :

j'ai créé le premier tableau 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);
    };

données utilisées pour les deux graphique est la même, comme à titre d'échantillons , de sorte que rien n'a changé
mais si je tire juste un graphique en lui-même, il fonctionne très bien
si j'ai mis les deux graphique en même temps je ne reçois que le graphique à secteurs

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

source d'informationauteur user3388314

Utiliser une seule fenêtre.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
        });
    }

Tout d'abord, vous avez seulement besoin d'une fenêtre.événement onload. Aucune raison d'avoir deux instances séparées.

Deuxième, les ensembles de données pour le graphique à secteurs et de la Ligne graphique sont en réalité très différents.

Tarte graphique des données de l'échantillon:

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

    ]

Ligne graphique des données de l'échantillon:

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

La ligne graphique est probablement pas l'initialisation parce que vous le nourrissez le mauvais type de données.

Je n'ai pas travaillé sur les différents type de graphiques, mais j'ai travaillé sur un exemple et a créé deux barre graphique 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 de 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
});
}

1

Utiliser seulement 1 fenêtre.onload
```
function myfunc1{
}
function myfunc2{
}
function start(){
myfunc1();
myfunc1();
}
window.onload = start(); 
```
Réf.:
http://www.htmlgoodies.com/beyond/javascript/article.php/3724571/Using-Multiple-JavaScript-Onload-Functions.htm
0

Vous pourriez plutôt utilisateur de jQuery pour obtenir l'objet canvas
```
var ctx = $parent.find('#' + idOfCanvas).get(0).getContext("2d");
```
maintenant, assurez-vous que le code ci-dessous n'est pas jeter js erreur
```
window.onload = function(){
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
};
```
comme vous le savez, si aucune erreur de js se produit le js-exécution s'arrête toutes les dernières lignes de code

J'ai essayer ce code ... c'résoudre votre 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',
}],
}
}
});
};

Vous devez vous connecter pour publier un commentaire.