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>你的帮助会很感激的，已经困扰了我一段时间了！
提前感谢
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-07-10 11:43:02
尝试为两个ctx变量使用不同的名称。
window.onload = function(){
var ctx = document.getElementById("canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
var ctx2 = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData2, {
responsive: true
});
}Stack Overflow用户
发布于 2014-08-22 23:25:42
一开始，我的问题和最初的问题完全一样，我尝试了阿潘达斯的建议，但在第一次尝试时没有得到正确的答案。
其他任何有相同问题的人可能会发现在一个页面上查看多个图形的工作示例是有用的：
<div id="canvas-holder">
<canvas id="A" width="300" height="300"/><br>
</div>
<div id="canvas-holder">
<canvas id="B" width="300" height="300"/><br>
</div>
<script>
var pieDataA = [ { value: 50, color: "#F6BFBD" } ];
var pieDataB = [ { value: 50, color: "#00BFBD" } ];
window.onload = function(){
var ctx1 = document.getElementById("A").getContext("2d");
window.myPieA = new Chart(ctx1).Pie(pieDataA);
var ctx2 = document.getElementById("B").getContext("2d");
window.myPieB = new Chart(ctx2).Pie(pieDataB); };
</script>小提琴链接: http://fiddle.jshell.net/2omjx9dn/
Stack Overflow用户
发布于 2015-02-12 11:01:20
初始代码中的错误是您多次调用函数window.onload。
不幸的是，事情并没有那么简单。在执行第二个onload事件处理程序时，将替换第一个onload事件处理程序。所以直到最后一次onload.window
这个问题通常出现在您想要单独创建图形时，例如，在页面图中包含with with(因为在每个php页面中都调用window.onload)。
简单的解决办法：
function start() {
func1();
func2();
}
window.onload = start;西蒙·威利森提议：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24673622
复制相关文章
相似问题
腾讯云开发者
