如何使chart.js條形圖可滾動

Question

有誰知道我如何制作使用chart.js 制作的可滾動圖表。 我有一個條形圖，它在 x 軸上有很長的類別列表。 當我將瀏覽器視圖更改為移動屏幕時，x 軸上的標簽會相互插入，因此無法讀取不同的類別。

我正在通過使圖表水平滾動來尋找解決方案。 那可能嗎？？

Answer 1

ChartJs 本身不支持可滾動axis 。 ChartJs 圖表具有響應性並根據父容器更改寬度。 您可以使用它來創建一個大型父容器並在其中放置您的 ChartJs 畫布。 overflow: auto帶有很少標記的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 插件，您可以在其中使用縮放和填充來滿足您的需求。

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