Chartjs 在数据更改时禁用缩放重置

Question

我在 Vue 中使用 Chart.js。每当更改/重新计算图表数据时，都会重置缩放比例。如何在数据更改时禁用正在重置的缩放，同时仍允许用户使用滚轮/捏合缩放？

Answer 1

您可以在图表选项中使用 maintainAspectRatio 属性。

根据Chart.js文档，

maintainAspectRatio

属性可用于控制当画布尺寸改变时图表纵横比是否保持不变。将此属性设置为 false 将防止图表在数据更改时重置缩放级别。（代码未测试）

<script>
    import Chart from 'chart.js';

    export default {
      data() {
        return {
          chart: null,
          chartData: [/* your chart data */],
          chartOptions: {
            responsive: true,
            maintainAspectRatio: false, // set to false to prevent resetting zoom on data change
            scales: {
              /* your chart scales */
            },
            /* other chart options */
          },
        };
      },
      mounted() {
        this.initChart();
      },
      methods: {
        initChart() {
          this.chart = new Chart(this.$refs.chart, {
            type: 'line',
            data: {
              labels: [/* your chart labels */],
              datasets: [
                {
                  data: this.chartData,
                  /* other dataset options */
                },
              ],
            },
            options: this.chartOptions,
          });
        },
        updateChartData() {
          // update your chart data
          this.chart.update();
        },
      },
    };
</script>

医生：

• Chart.js 关于 maintainAspectRatio 的文档：
• Chart.js 关于 update() 方法的文档：