chartjs-plugin-zoom:在页面首次加载时获取当前可见的值

基础概念

chartjs-plugin-zoom 是一个用于 Chart.js 图表的插件，它提供了缩放和平移功能。这个插件允许用户通过鼠标滚轮、触摸手势或编程方式来缩放图表的某个区域，并且可以平移图表以查看不同的数据区域。

类型

chartjs-plugin-zoom 支持以下类型的缩放：

x 轴缩放：只缩放 x 轴。
y 轴缩放：只缩放 y 轴。
xy 轴缩放：同时缩放 x 轴和 y 轴。

应用场景

适用于需要展示大量数据并希望用户能够自由探索数据的场景，例如金融图表、气象数据图表等。

获取当前可见的值

在页面首次加载时获取当前可见的值，可以通过监听图表的 zoom 和 pan 事件来实现。以下是一个示例代码：

import { Chart, LineController, LineElement, PointElement, LinearScale, Title, Tooltip } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, Title, Tooltip);
Chart.register(require('chartjs-plugin-zoom'));

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {
        plugins: {
            zoom: {
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'xy',
                }
            }
        }
    }
});

chart.options.plugins.zoom.onZoomComplete = function() {
    const activePoints = chart.getElementsAtEventForMode(chart.chartArea, 'nearest', { intersect: true }, 'index', { threshold: 5 });
    if (activePoints.length > 0) {
        const firstPoint = activePoints[0];
        const datasetIndex = firstPoint._datasetIndex;
        const dataIndex = firstPoint._index;
        const value = chart.data.datasets[datasetIndex].data[dataIndex];
        console.log(`Current visible value: ${value}`);
    }
};