当显示大量数据图而不从中间显示时

问题描述 投票:0回答:1

使用Chartjs-v2.9.3,不会显示从图形的中间到结尾的线或条。但是工具提示正在显示数据。

但是,在Chartjs-v2.4.0中使用相同的数据时,所有数据线都显示在图形中。

以下是Chartjs-v2.9.3结果:enter image description here

但是对于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是否有显示限制?

chart.js
1个回答
0
投票

我认为问题出在您的html div样式中。

不知道要用这些数字实现什么,但是没有它们,一切都会好起来的。

https://jsbin.com/gogufonibi/1/edit?html,js,output

<div>
  <canvas id="chartJSContainer" width="3480px" height="500"></canvas>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.