1

我正在使用 react-chartjs2 来显示我通过使用 chartjs-plugin-zoom 制作的可水平滚动的图表。我不想通过拖动鼠标而是通过单击按钮来平移图表。我检查了插件的代码,我猜想在单击按钮时调用 doPan() 函数,我将能够向右/向左移动。

const options = {
    layout: {
      padding: {
        top: 200,
        left: 50,
        right: 50
      }
    },
    plugins: {
      datalabels: {
        display: true,
        anchor: "end",
        align: "top"
      },
      setTextMiddle: false,
      zoom: {
        zoom: {
          enabled: false,
          drag: true,
          mode: "x",
          rangeMin: {
            x: "Jan",
            y: null
          },
          rangeMax: {
            x: "June",
            y: null
          }
        },
        pan: {
          enabled: true,
          mode: "x",
          speed: 2, 
        }
      }
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            max: "Dec",
            min: "July"
          }
        }
      ],
      yAxes: [
        {
          display: false,
          ticks: {
            max: 105,
            min: 60
          }
        }
      ]
    },
    maintainAspectRatio: false,
    responsive: true,
    legend: {
      display: false
    }
  };

上面的代码是我在响应中用来启用图表平移的代码。任何想法将不胜感激。

在下图中我可以使用鼠标拖动,我想在左右添加一个按钮,用于在图表上平移。

在此处输入图像描述

4

0 回答 0