使 chartjs 在 x 轴上可滚动

Question

我想让chartjs 图形在x 轴上可滚动，但只能在cavas 上滚动。 我已经尝试过这个解决方案，但是让所有的 div 都可以滚动。

<div class="chartWrapper">
    <div class="chartAreaWrapper" id="chartAreaWrapper">
        <canvas id="chart-hora" height="500" width="1200"></canvas>
    </div>
</div>

.chartWrapper {
    position: relative;
}
.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}
.chartAreaWrapper {
   width: 600px;
   overflow-x: auto;
}

我在移动应用程序上显示此图表，因此我只希望画布可滚动，而不是使视图可滚动的整个 div。

Answer 1

将您的canvas 放入div 并定义它们的width，如下所示。还要确保在包装 div 元素上定义 CSS overflow: auto。

<div style="width: 600px; overflow: auto;">
  <canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>

为避免 canvas 在包装器 div 自动调整大小时，请确保图表没有响应。这需要在图表options 中定义如下：

options: {
    responsive: false

请看下面的运行代码示例：

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
    datasets: [{
        label: 'WARNINGS',
        data: [1, 2, 2, 2, 3, 2, 1, 4, 4, 2, 1, 4, 3, 4],
        borderColor: 'rgb(255, 159, 64)',
        backgroundColor: 'rgba(255, 159, 64, 0.2)'
      },
      {
        label: 'ERRORS',
        data: [4, 5, 3, 2, 1, 0, 3, 2, 5, 5, 3, 4, 2, 1],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ]
  },
  options: {
    responsive: false
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div style="width: 600px; overflow: auto;">
  <canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>