有谁知道我如何制作使用 chart.js 制作的图表可滚动。 我有一个条形图,它在 x 轴上有很长的类别列表。当我将浏览器 View 更改为移动屏幕时,x 轴上的标签相互重叠,无法阅读不同的类别。
我正在通过使图表水平滚动来寻找解决方案。这可能吗??
最佳答案
ChartJs 本身不支持可滚动的轴
。 ChartJs 图表是响应式的,并根据父容器更改宽度。您可以使用它来创建一个大的父容器,并在其中放置您的 ChartJs Canvas 。 overflow: auto
带有少量标记的属性应该会给你想要的结果。
查看演示:http://jsfiddle.net/rbdqxfzL/140
HTML
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="chart" height="400" width="15000"></canvas>
</div>
</div>
CSS
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 15000px;
overflow-x: scroll;
}
关于javascript - 如何使 chart.js 条形图可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39473991/