javascript - Javascript - Chart.js不显示第二行

我有一个关于chart.js的问题,我用两条直线创建了折线图,一行表示高值,一行表示低值。

一切正常,但红色的低线不会出现在图表中。


var config = {


 type: 'line',


 data: {


 labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],


 datasets: [{


 label: 'High',


 backgroundColor: 'blue',


 borderColor: 'blue',


 data: [10.43, 10.42, 10.44, 10.43, 10.40],


 fill: false,


 }, {


 label: 'low',


 fill: false,


 backgroundColor: 'red',


 borderColor: 'red',


 data: [


 [8.43, 8.5, 8.39, 8.38, 8.38],


 ],


 }]


 },


 options: {


 responsive: true,


 title: {


 display: true,


 text: 'Test'


 },


 tooltips: {


 mode: 'index',


 intersect: false,


 },


 hover: {


 mode: 'nearest',


 intersect: true


 },


 scales: {


 xAxes: [{


 display: true,


 scaleLabel: {


 display: true,


 labelString: 'Time'


 }


 }],


 yAxes: [{


 display: true,


 scaleLabel: {


 display: true,


 labelString: 'Value'


 }


 }]


 }


 }


};


var ctx = $('#dia');


var myChart = new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>



<canvas id="dia"></canvas>

时间: 原作者:

第二个数组是双重包装的:


data: [


 [8.43, 8.5, 8.39, 8.38, 8.38],


 ],



移除第二组括号可以正确生成图形。


var config = {


 type: 'line',


 data: {


 labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],


 datasets: [{


 label: 'High',


 backgroundColor: 'blue',


 borderColor: 'blue',


 data: [10.43, 10.42, 10.44, 10.43, 10.40],


 fill: false,


 }, {


 label: 'low',


 fill: true,


 backgroundColor: 'red',


 borderColor: 'red',


 data: [8.43, 8.5, 8.39, 8.38, 8.38], // ****THIS IS WHERE THE UPDATE IS****


 }]


 },


 options: {


 responsive: true,


 title: {


 display: true,


 text: 'Test'


 },


 tooltips: {


 mode: 'index',


 intersect: false,


 },


 hover: {


 mode: 'nearest',


 intersect: true


 },


 scales: {


 xAxes: [{


 display: true,


 scaleLabel: {


 display: true,


 labelString: 'Time'


 }


 }],


 yAxes: [{


 display: true,


 scaleLabel: {


 display: true,


 labelString: 'Value'


 }


 }]


 }


 }


};


var ctx = $('#dia');


var myChart = new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>



<canvas id="dia"></canvas>

原作者:
...