时间戳

首页 > 解决方案 > 在 chartjs 中包含 chartjszoom 后将无法缩放

javascript - 在 chartjs 中包含 chartjszoom 后将无法缩放

问题描述

包含正确版本的 chartjs 和 chartjs-plugin-zoom 后无法缩放。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>

这是我的画布标签

<div class='chart-wrapper'>
  <div class="training-chart-area" style="width: 768px; height: 384px;">
    <canvas id="trainingChart1"></canvas>
  </div>
</div>

我的图表 js 函数中的插件选项

options: {
      plugins: {
        zoom: {
          zoom: {
              enabled: true,  
              mode: 'y'
          },
          pan: {
              enabled: true
          }
        }
}

我知道我有正确的版本，因为我用另一个 HTML 文件对其进行了测试。我认为问题可能是 chartjs-plugin-zoom 无法在一个图表中处理多个数据集，但测试 HTML 工作得非常好。我不知道哪里出了问题。

标签： javascripthtmlchart.jschartjs-plugin-zoom

解决方案

推荐阅读