如何为图表设置初始缩放值（ChartJS + ChartJS Zoom 插件）？

Question

我正在尝试创建一个包含过去 30 天数据的图表。但我想为小屏幕尺寸设置初始缩放值。因此，该图表将在移动设备上显示，而不是全部 30 个值，而是 5 或 10 个。我可以平移或缩小该图表的移动版本以浏览所有数据。

如何使用 ChartJS-plugin-zoom 设置缩放的初始值？

谢谢！

const ctx = document.getElementById('cumulativeChart');
const labels = [
'Jul 13', 'Jul 14', 'Jul 15', 'Jul 16', 'Jul 17', 'Jul 18',
'Jul 19', 'Jul 20', 'Jul 21', 'Jul 22', 'Jul 23', 'Jul 24',
'Jul 25', 'Jul 26', 'Jul 27', 'Jul 28', 'Jul 29', 'Jul 30',
'Jul 31', 'Aug 01', 'Aug 02', 'Aug 03', 'Aug 04', 'Aug 05',
'Aug 06', 'Aug 07', 'Aug 08', 'Aug 09', 'Aug 10', 'Aug 11',
];

const data = {
labels: labels,
datasets: [{
    label: 'Cumulative Data',
    borderColor: '#3a96fd',
    borderWidth: 2,
    data: [
        0.13299527, 0.16131551, 0.18795605, 0.20597476, 0.22560615, 0.23797296,
        0.25541133, 0.28006363, 0.30473082, 0.32418763, 0.33880094, 0.35331442,
        0.36290294, 0.38035896, 0.40230393, 0.42181523, 0.43855241, 0.4481249,
        0.4696107, 0.48147319, 0.4958352, 0.52931651, 0.55098815, 0.56771866,
        0.58238203, 0.60083731, 0.61222939, 0.6262777, 0.64303029, 0.65866165,
    ],
    pointRadius: 4,
    pointBackgroundColor: '#3a96fd',
    fill: true
}]};

const config = {
type: 'line',
data: data,
options: {
    responsive: true,
    scales: {
        y: {
            grid: {
                color: 'rgba(128,151,177, 0.3)',
                borderDash: [3, 3],
                drawTicks: false,
                borderColor: '#424b5f',
            },
            ticks: {
                align: "center",
                padding: 10,
            },
        },
        x: {
            grid: {
                color: 'rgba(128,151,177, 0.3)',
                borderDash: [3, 5],
                drawTicks: false,
                borderColor: '#424b5f'
            },
            ticks: {
                align: "center",
                padding: 10,
            }
        }
    },
    plugins: {
        legend: {
            display: false
        },
        tooltip: {
            usePointStyle: true,
        },
        zoom: {
            zoom: {
                wheel: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            },
            pan: {
                enabled: true,
                mode: 'x',
            },
            limits: {
                x: {
                    minRange: 3
                },
            },
        }
    }
}
};

const myChart = new Chart(
ctx,
config
);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
   <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>

Answer 1

您可以调用.zoom 函数，该函数将百分比作为数字来缩放，因此10% 的增加需要您传递1.1。

它在 10 毫秒后超时调用的原因是因为否则它会缩放比例而不是点，所以似乎 chart.js 需要先完成初始化，然后才能调用缩放函数：

const ctx = document.getElementById('cumulativeChart');
const labels = [
  'Jul 13',
  'Jul 14',
  'Jul 15',
  'Jul 16',
  'Jul 17',
  'Jul 18',
  'Jul 19',
  'Jul 20',
  'Jul 21',
  'Jul 22',
  'Jul 23',
  'Jul 24',
  'Jul 25',
  'Jul 26',
  'Jul 27',
  'Jul 28',
  'Jul 29',
  'Jul 30',
  'Jul 31',
  'Aug 01',
  'Aug 02',
  'Aug 03',
  'Aug 04',
  'Aug 05',
  'Aug 06',
  'Aug 07',
  'Aug 08',
  'Aug 09',
  'Aug 10',
  'Aug 11',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'Cumulative Data',
    borderColor: '#3a96fd',
    borderWidth: 2,
    data: [
      0.13299527,
      0.16131551,
      0.18795605,
      0.20597476,
      0.22560615,
      0.23797296,
      0.25541133,
      0.28006363,
      0.30473082,
      0.32418763,
      0.33880094,
      0.35331442,
      0.36290294,
      0.38035896,
      0.40230393,
      0.42181523,
      0.43855241,
      0.4481249,
      0.4696107,
      0.48147319,
      0.4958352,
      0.52931651,
      0.55098815,
      0.56771866,
      0.58238203,
      0.60083731,
      0.61222939,
      0.6262777,
      0.64303029,
      0.65866165,
    ],
    pointRadius: 4,
    pointBackgroundColor: '#3a96fd',
    fill: true
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 3],
          drawTicks: false,
          borderColor: '#424b5f',
        },
        ticks: {
          align: "center",
          padding: 10,
        },
      },
      x: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 5],
          drawTicks: false,
          borderColor: '#424b5f'
        },
        ticks: {
          align: "center",
          padding: 10,
        }
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        usePointStyle: true,
      },
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
        limits: {
          x: {
            minRange: 3
          },
        },
      }
    }
  }
};

const myChart = new Chart(
  ctx,
  config
);

setTimeout(() => {
  myChart.zoom(3);
  myChart.pan({
    x: Number.MAX_SAFE_INTEGER
  }, undefined, 'default');
}, 10)

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
  <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>