Javascript Chart.js-多折线图-[2]

这个问题被问到了，似乎得到了回答。虽然这对我没什么帮助，甚至似乎有点作用

（使用）

我使用与链接帖子完全相同的代码，如下所示

<script src="includes/Chart.js"></script>



<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="canvas1" width="250" height="250">
        </canvas>
    </div>
    <div class="canvas-holder">
        <canvas id="canvas2" width="250" height="250">
        </canvas>
    </div>
</div>





<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(){
</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 ?>]
            }
        ]

    }
</script>

<script>
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
    });

}
</script>

变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“目标”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[160000175000018500018000185000018500001850000195000200000,0,0]
},
{
标签：“销售”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[，，，，，，，，，，]
}
]
}
window.onload=函数（）{
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“目标”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[1900021002300002500027000290003100320033000,0,0]
},
{
标签：“销售”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[，，，，，，，，，，]
}
]
}
window.onload=函数（）{
var ctx=document.getElementById（“canvas2”）.getContext（“2d”）；
window.myLine=新图表（ctx）.Line（lineChartData{
回答：对
});
var ctx2=document.getElementById（“canvas1”）.getContext（“2d”）；
window.myLine=新图表（ctx2）.Line（lineChartData2{
回答：对
});
}

---

我不知道答案/问题是否过时，或者我只是做错了什么？

lineChartData变量似乎重复了，我想您需要将lineChartData2命名为第二个变量或任何您想要的名称

检查以下声明：

window.myLine = new Chart(ctx).Line(lineChartData ...
window.myLine = new Chart(ctx2).Line(lineChartData2 ...

每个脚本中的vars声明是：

var lineChartData = {...}
var lineChartData = {...}

---

两次！所以第二个声明覆盖了最旧的一个。您需要两个数据集，它们必须与chart.js init代码的名称匹配。

lineChartData变量似乎重复了，我想您需要将lineChartData2命名为第二个或任何您想要的名称

检查以下声明：

window.myLine = new Chart(ctx).Line(lineChartData ...
window.myLine = new Chart(ctx2).Line(lineChartData2 ...

每个脚本中的vars声明是：

var lineChartData = {...}
var lineChartData = {...}

---

两次！因此第二次声明将覆盖最早的一次。您需要两个数据集，并且它们必须与chart.js init代码的名称匹配。

LineChartData变量为duplicated@cesarluis我有lineChartData2和lineChartData，这有多复杂？lineChartData变量是duplicated@cesarluis我有lineChartData2和lineChartData，配音怎么样licate？我看不出有什么不对，一个名为lineChartData，另一个名为lineChartData2。这应该不是问题…？@iversen在你发布的代码中，两个变量名为equal，一个数据集覆盖了最旧的数据集。所以我认为这是失败的原因。那么解决办法是什么呢？我在回答中暗示了。你需要两个变量，每个数据集一个.在第一个脚本变量lineChartData={…}和第二个脚本变量lineChartData2={…}中，当前是这样的，

window.myLine=new Chart（ctx2）.Line（lineChartData

和

lineChartData2

。？我看不出有什么错，一个名为lineChartData，另一个名为lineChartData2。应该不会有问题吧…？@iversen在你发布的代码中，两个变量被命名为相等，一个数据集覆盖了最早的数据集。所以我认为这是失败的。那么修复方法会是什么呢？我在answe中含蓄地说r、 您需要两个变量，一个用于处理每个数据集。在第一个脚本变量lineChartData={…}和第二个脚本变量lineChartData2={…}中，这就是当前的情况，

window.myLine=new Chart（ctx2）.Line（lineChartData

和

lineChartData2

）。。？