Chart JS - 如果数据过多，则使图表可滚动

Posted 2023-04-13

【中文标题】Chart JS - 如果数据过多，则使图表可滚动

【英文标题】：Chart JS - Make chart scrollable if too much data

【发布时间】：2021-02-14 15:01:12

【问题描述】：

我对图表 js 有疑问。我在一张图表中处理了 1000 个条目，而且它太密集且难以阅读。当它超过一定数量的数据（或每个点之间的一定距离）时，我希望它有一个滚动条。我该怎么做？

如果您对此问题有任何其他没有滚动条的解决方案，我也想听听。

提前致谢， 约夫·斯特鲁戈

【参考方案1】：

如果您想在 Chart.js 中添加一定数量的数据后添加滚动条。然后可以使用 CSS 来允许水平（overflow-x:scroll;）或垂直（overflow-y:scroll;）滚动。

<style>
.chartWrapper 
  position: relative;


.chartWrapper > canvas 
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;


.chartAreaWrapper 
  width: 15000px;
  overflow-x: scroll;

</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <canvas id="chart"  ></canvas>
  </div>
</div>

更多示例，您可以使用 - http://jsfiddle.net/rbdqxfzL/140