Chart.js -多行图表-仅显示最后的图表
Chart.js -多行图表-仅显示最后的图表
提问于 2014-07-10 09:59:41
我使用chart.js在一个页面上显示多个线条图。然而，即使我把它们称为#canvas1和#canvas2，也只有最后一个图表显示。有些地方肯定有冲突，我试过很多事情，但没有joy。这里有两个图表，它只显示了最后一个：
图一
<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
datasets : [
{
label: "Target",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [160000,175000,185000,180000,185000,185000,185000,195000,200000,0,0]
},
{
label: "Sales",
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 : [<?php echo $stockJanuary ?>,<?php echo $stockFebruary ?>,<?php echo $stockMarch ?>,<?php echo $stockApril ?>,<?php echo $stockMay ?>,<?php echo $stockJune ?>,<?php echo $stockJuly ?>,<?php echo $stockAugust ?>,<?php echo $stockSeptember ?>,<?php echo $stockOctober ?>,<?php echo $stockNovember ?>,<?php echo $stockDecember ?>]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>图二：
<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
datasets : [
{
label: "Target",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,0,0]
},
{
label: "Sales",
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 : [<?php echo $northJanuary ?>,<?php echo $northFebruary ?>,<?php echo $northMarch ?>,<?php echo $northApril ?>,<?php echo $northMay ?>,<?php echo $northJune ?>,<?php echo $northJuly ?>,<?php echo $northAugust ?>,<?php echo $northSeptember ?>,<?php echo $northOctober ?>,<?php echo $northNovember ?>,<?php echo $northDecember ?>]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>你的帮助会很感激的，已经困扰了我一段时间了！
提前感谢
Stack Overflow用户
发布于 2016-06-23 21:22:23
我也有同样的问题，虽然这是一个轻微的缺乏关注，但我花了一段时间才弄清楚:我正在使用相同的数据参考所有图表，但变化很小。
以下是问题和解决办法：
chartData = {
labels: Array(dataLeft.length).fill(""), // No labels on X axis
datasets: [
{
label : "Lado Esquerdo",
backgroundColor : "rgba(50,192,50,0.4)",
borderColor : "rgba(75,192,75,1)",
pointBorderColor : "rgba(75,192,75,1)",
data : dataLeft,
},
{
label : "Lado Direito",
backgroundColor : "rgba(192,50,50,0.4)",
borderColor : "rgba(192,75,75,1)",
pointBorderColor : "rgba(192,75,75,1)",
data : dataRight,
}
]
};我对所有图表都使用了这个chartData，但在构造新图表之前，我更改了数据属性(chartData.datasets[0].data = some_specific_value_for_each_chart)。
但是，由于这是一个引用，我更改了所有以前构建的图表的数据，将它们的数据设置为上次初始化的图表的相同数据！
我不知道我是否采用了最好的方法，但是为了解决这个问题，我在初始化图表时动态地返回了数据
createChartData = function(dataRight, dataLeft) {
return {
labels: Array(dataLeft.length).fill(""), // No labels on X axis
datasets: [
{
label : "Lado Esquerdo",
backgroundColor : "rgba(50,192,50,0.4)",
borderColor : "rgba(75,192,75,1)",
pointBorderColor : "rgba(75,192,75,1)",
data : dataLeft,
},
{
label : "Lado Direito",
backgroundColor : "rgba(192,50,50,0.4)",
borderColor : "rgba(192,75,75,1)",
pointBorderColor : "rgba(192,75,75,1)",
data : dataRight,
}
]
}
};然后插入图表：
var chart1 = new Chart(ctx1, {
type: 'line',
data: createChartData(graphData1, graphData2),
options: chartOptions
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24673622
复制相关文章
相似问题
腾讯云开发者
