Question

有谁知道如何使用chart.js滚动制作图表。我有一个条形图，在x轴上有很长的类别列表。当我将浏览器视图更改为移动屏幕时，x轴上的标签会相互进入，因此无法读取不同的类别。

我正在通过使图表水平滚动来寻找解决方案。那可能吗？

Answer 1

ChartJs本身并不支持可滚动axis。 ChartJs图表是响应式的，并根据父容器更改宽度。您可以使用它来创建一个大的父容器，并在其中包含ChartJs画布。带有少量标记的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;
}

Answer 2

为Chart.js使用chartjs-plugin-zoom plugin，可以根据需要使用缩放和填充。

plugins: {        
   zoom: {
      pan: {
         enabled: true
      },
      zoom: {
         enabled: true
      }
   }
}

如何使chart.js条形图可滚动

2 个答案: