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
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
});
}
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
});
}
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.
Utilisez seulement 1 window.onload
function myfunc1{
}
function myfunc2{
}
function start(){
myfunc1();
myfunc1();
}
window.onload = start();
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',
}],
}
}
});
};