svelte-chartjs是否支持chartRef属性绑定配合chartjs-plugin-zoom实现程序化缩放？

• svelte-chartjs没有专门的chartRef属性，而是直接用Svelte原生的bind:this语法来获取图表组件实例，进而拿到底层的Chart.js实例。
• 示例代码如下：

  <script>
    import { Line } from 'svelte-chartjs';
    import { Chart, registerables } from 'chart.js';
    import zoomPlugin from 'chartjs-plugin-zoom';
  
    Chart.register(...registerables, zoomPlugin);
  
    let chartComponent; // 用于绑定组件实例
    let chartInstance; // 存储底层Chart.js实例
  
    // 组件挂载后自动获取图表实例
    $: if (chartComponent) {
      chartInstance = chartComponent.chart;
    }
  
    // 程序化执行缩放的示例函数
    function zoomToSpecificRange() {
      if (chartInstance) {
        chartInstance.zoom.scale('x', {
          min: 0,
          max: 5
        });
      }
    }
  </script>
  
  <Line bind:this={chartComponent} options={{
    plugins: {
      zoom: {
        pan: { enabled: true, mode: 'x' },
        zoom: { enabled: true, mode: 'x' }
      }
    }
  }} data={/* 填入你的图表数据 */} />
  
  <button on:click={zoomToSpecificRange}>缩放到X轴0-5区间</button>
  

• 核心要点：
  • 通过bind:this={chartComponent}绑定svelte-chartjs的组件实例
  • 组件实例的chart属性就是底层的Chart.js实例，可直接调用zoom插件提供的API（比如zoom.scale()）
  • 借助Svelte的反应式声明$:，确保组件挂载后能及时获取到可用的图表实例

内容的提问来源于stack exchange，提问作者cycle4passion