使用Chartjs-v2.9.3,不会显示从图形的中间到结尾的线或条。但是工具提示正在显示数据。
但是,在Chartjs-v2.4.0中使用相同的数据时,所有数据线都显示在图形中。
但是对于Chartjs-v2.4.0,没有显示问题。
这里是用于两者的数据。
var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, {
type: 'line',
data: {
"labels": ["03/01 00:00", "03/01 01:00", "03/01 02:00", "03/01 03:00", "03/01 04:00", "03/01 05:00", ...x500],
"datasets": [{
"pointRadius": 0,
"pointBorderWidth": 0,
"pointStyle": "rectRounded",
"lineTension": 0,
"borderWidth": 1,
"fill": false,
"borderColor": "blue",
"backgroundColor": "blue",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ...x500]
}]
},
options: {
maintainAspectRatio:false,
responsive:true,
legend:{
display:false,position:"top",align:"start"},
scales:{
yAxes:[
{ticks:{min:0,beginAtZero:true}}],
xAxes:[
{ticks:{minRotation:0,maxRotation:80}}]},
tooltips:{intersect:false,position:"nearest",callbacks:{}}
}
})
并且只是在HTML中的简单显示:
<body>
<div style="overflow:auto;position:relative;width:33480px;height:500px;" >
<canvas id="chartJSContainer"></canvas>
</div>
</body>
jsfiddle linkChartjs是否有显示限制?
我认为问题出在您的html div
样式中。
不知道要用这些数字实现什么,但是没有它们,一切都会好起来的。
https://jsbin.com/gogufonibi/1/edit?html,js,output
<div>
<canvas id="chartJSContainer" width="3480px" height="500"></canvas>
</div>