标签: chartjs-plugin-zoom

我有一个使用 ChartJS 和用于缩放的插件“chart-plugin-zoom”绘制的图形。我需要将 y 轴自动缩放到可见图形段上显示的数据点，同时在 x 轴上进行缩放。我该怎么做？

zoom: {
    enabled: true,
    mode: chart.options['maxValue'] && chart.options['maxValue'] !== 0 ? 'xy' : 'x',
    rangeMin: {
      x: 60000, // Limit zoom in range: 1 min
      y: chart.options['series'][index] && chart.options['series'][index].beginAtZero ? 0 : null
    },
    rangeMax: {
      x: chart.options['maxX'] - chart.options['minX'],
      y: chart.options['maxValue'] && chart.options['maxValue'] !== 0 ? 1.2 * chart.options['maxValue'] : null,
    }
 }

我想在多个图表上同步平移和缩放。我一直在使用 Chart.js 和 chartjs-plugin-zoom。

charjs-plugin-zoom 使用 onZoom 回调函数调用事件。所以，X轴两端的值是通过回调函数以这种方式获取的。

onZoom: function () {
    var minVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
    var maxVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;

    leftEnd = minVal;
    rightEnd = maxVal;

    updateChart();
}

然后使用 updateChart 函数更新图表。

我以为其他图表应该用updateChart函数获得的X轴两端的值来更新。使用 Chart.helpers.each 调用 update() 以更新所有图表。

function updateChart() {
    Chart.helpers.each(Chart.instances, function (instance) {
        instance.oprions = {
            scales: [{
                xAxes: {
                    time: {
                        min: leftEnd,
                        max: rightEnd
                    }
                }
            }]
        };
        instance.update();
    });
}

然而，并没有得到预期的结果。Zoom-PAN 仅反映操作的图表。

我认为 onZoom 回调函数获取 X 轴的两个边缘，并每帧更新图表。图表只能使用选项更新，因此 Chart.helpers.each 可用于一次更新所有图表。如果要更新的X轴两端都是全局变量，则所有图形都可以引用。

这个方法不正确吗？选项更新方法错了吗？更新时间不对？

更新

我通过参考https://www.chartjs.org/docs/latest/developers/updates.html了解了如何更新图表。

实际上，多个图表的 X 轴刻度范围已更改，但最大缩放并再次停止工作。 …

我有一个使用“react-chartjs-2”库来显示一些数据的反应组件。带有数据的图表工作正常。我不能做的是使图表与“chartjs-plugin-zoom”插件一起使用。我不确定配置有什么问题。我在用：

“react-chartjs-2”：“^3.0.3”

“chartjs-plugin-zoom”：“^1.0.1”

import { Line } from 'react-chartjs-2'
import * as zoom from 'chartjs-plugin-zoom'

import classes from './Chart.module.css'

interface Chart {
  title: string
  labels: string[]
  datasets: any
}

const Chart: React.FC<Chart> = props => {
  const data = {
    title: props.title,
    labels: props.labels,
    datasets: props.datasets,
  }

  const options = {
    maintainAspectRatio: false,
    responsive: true,
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1.5,
      },
    },
    scales: {
      x: {
        ticks: {
          color: 'rgba( 0, 0, 1)',
        }, …

我正在使用 chart.js 模块来绘制一些数据，并使用 chartjs-plugin-zoom 来启用缩放和平移，但是尽管缩放有效，x 轴上的标签不会因任何原因而改变。我见过类似的问题，但它们都涉及时间序列数据，因此建议无济于事。

这是缩小的情节：

这是放大的：

要注意的关键是 y 轴上的标签如何更改，但 x 轴标签没有更改。这是图表的相关配置变量：

const config3 = {
                        
                        type: 'line',
                        data: {
                            labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                            datasets: [
                            
                            {
                                label: "",
                                backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
                                borderColor: '#0071BC',
                                data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                                fill: false,
                                borderWidth: 1,
                            },

                            ],
                        },
                        options: {
                            responsive: …