样式HighCharts重置缩放按钮与材质UI按钮

Question

我正在做一个项目，我们在UI组件中使用HighCharts和Material UI。我是否可以使用材质UI按钮组件来代替标准HighChart重置缩放按钮?

Answer 1

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

1. 覆盖方法，负责显示默认按钮。

---

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

---

2. 添加并定位一个自定义按钮，链接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