React-chartjs-2：重置缩放

Question

我正在使用react-chartjs-2创建条形图。我也在使用缩放插件。现在我想创建一个按钮来重置缩放。对于普通的图表，它通过调用图表对象的 .resetZoom() 函数来工作。但我没有图表对象。有没有办法重置变焦。也许有参考？

import React from "react";
import { Chart as ChartJS, registerables } from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import zoomPlugin from "chartjs-plugin-zoom";

ChartJS.register(...registerables, zoomPlugin);

let options = {
  responsive: true,
  plugins: {
    zoom: {
      zoom: {
        wheel: {
          enabled: true // SET SCROOL ZOOM TO TRUE
        }
      },
      pan: {
        enabled: true
      }
    },
    legend: {
      position: "right" as const,
      labels: {
        font: {
          size: 16
        }
      }
    },
    title: {
      display: true,
      text: "title",
      font: {
        size: 24
      }
    }
  },
  scales: {
    x: {
      stacked: true,
      ticks: {
        font: {
          size: 16
        }
      }
    },
    y: {
      stacked: true,
      title: {
        display: true,
        text: "CO2-Äquivalente",
        font: {
          size: 16
        }
      },
      ticks: {
        font: {
          size: 16
        }
      }
    }
  }
};

const labels = ["January", "February", "March", "April", "May"];

export const data = {
  labels,
  datasets: [
    {
      type: "bar" as const,
      label: "Data",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(255, 99, 132, 0.5)"
    },
    {
      type: "scatter" as let,
      label: "Worst Revenue",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(70, 0, 235, 0.5)"
    },
    {
      type: "scatter" as let,
      label: "Best Revenue",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(53, 162, 235, 0.5)"
    }
  ]
};

export function App() {
  return <Bar options={options} data={data} />;
}

现场工作示例：

Answer 1

您可以通过参考图表轻松实现这一点。在 React 中 useRef() 钩子用于此目的。

请参阅此示例。我对您的代码做了一些更改以使其正常工作。

import React from "react";
import { Chart as ChartJS, registerables } from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import zoomPlugin from "chartjs-plugin-zoom";

ChartJS.register(...registerables, zoomPlugin);

let options = {
  responsive: true,
  plugins: {
    zoom: {
      zoom: {
        wheel: {
          enabled: true // SET SCROOL ZOOM TO TRUE
        }
      },
      pan: {
        enabled: true
      }
    },
    legend: {
      position: "right" as const,
      labels: {
        font: {
          size: 16
        }
      }
    },
    title: {
      display: true,
      text: "title",
      font: {
        size: 24
      }
    }
  },
  scales: {
    x: {
      stacked: true,
      ticks: {
        font: {
          size: 16
        }
      }
    },
    y: {
      stacked: true,
      title: {
        display: true,
        text: "CO2-Äquivalente",
        font: {
          size: 16
        }
      },
      ticks: {
        font: {
          size: 16
        }
      }
    }
  }
};

const labels = ["January", "February", "March", "April", "May"];

export const data = {
  labels,
  datasets: [
    {
      type: "bar" as const,
      label: "Data",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(255, 99, 132, 0.5)"
    },
    {
      type: "scatter" as let,
      label: "Worst Revenue",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(70, 0, 235, 0.5)"
    },
    {
      type: "scatter" as let,
      label: "Best Revenue",
      data: [1, 2, 3, 4, 5],
      backgroundColor: "rgba(53, 162, 235, 0.5)"
    }
  ]
};

export function App() {
  const chartRef = React.useRef(null);

  const handleResetZoom = () => {
    if (chartRef && chartRef.current) {
      chartRef.current.resetZoom();
    }
  };

  return (
    <div>
      <Bar ref={chartRef} options={options} data={data} />
      <button onClick={handleResetZoom}>Reset Zoom</button>
    </div>
  );
}

Answer 2

谢谢你，它可以在 React 18 中使用