使用 Material UI 按钮设置 HighCharts 的样式重置缩放按钮答案

【问题标题】：Styling HighCharts reset Zoom button with Material UI button使用 Material UI 按钮设置 HighCharts 的样式重置缩放按钮
【发布时间】：2021-06-06 17:04:18
【问题描述】：

我正在开展一个项目，我们将 HighCharts 和 Material UI 用于 UI 组件。有什么方法可以使用 Material UI 按钮组件代替标准的 HighChart 重置缩放按钮？

【问题讨论】：

它们都是 javascript 库，确保您可以使用它。你试过了吗？

标签： css reactjs user-interface highcharts material-ui

【解决方案1】：

此按钮的样式选项有限，但您可以通过简单的步骤将其替换为自定义按钮：

负责显示默认按钮的覆盖方法。

Highcharts.Chart.prototype.showResetZoom = function () {};

添加并定位一个自定义按钮，并在点击时调用链接chart.zoomOut 方法：

const App = () => {
  const chartComponent = useRef(null);
  const [isZoomed, setIsZoomed] = useState(false);
  const [options] = useState({
    chart: {
      zoomType: "x",
      events: {
        selection: function (e) {
          if (e.resetSelection) {
            setIsZoomed(false);
          } else {
            setIsZoomed(true);
          }
        }
      }
    },
    ...
  });

  const resetZoom = () => {
    if (chartComponent && chartComponent.current) {
      chartComponent.current.chart.zoomOut();
    }
  };

  return (
    <div style={{ position: "relative" }}>
      <HighchartsReact
        ref={chartComponent}
        highcharts={Highcharts}
        options={options}
      />
      {isZoomed && (
        <Button
          style={{ position: "absolute", top: 50, right: 10 }}
          onClick={resetZoom}
          color="primary"
        >
          Reset zoom
        </Button>
      )}
    </div>
  );
};

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-ssqk9?file=/demo.jsx

API 参考： https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut

【讨论】：