简介
大家好,我是react的新手,也是Highcharts的新手,但以前用过js。我有一个缩放功能,我想把它转换成react代码。我很难弄清楚如何在react的上下文中使用Highcharts.Chart.prototype.callbacks.push
。
我想做的是
我正在尝试创建一个缩放功能,它可以在股票图表上平滑地使用鼠标滚轮。流行的平台交易视图有一个非常平滑的缩放,我正在尝试做一些类似的事情。
代码:
我有一个js fiddle https://jsfiddle.net/drewscatterday/84shran6/中的代码工作得很好,但是我很难转换它来做出React。
我已经尝试在我的react代码中这样做,但没有运气:
const handleScroll= (e) =>{
e.preventDefault();
var chart = Highcharts.chart;
var xAxis = chart.xAxis[0],
extremes = xAxis.getExtremes(),
newMin = extremes.min,
output = [];
if (e.deltaY < 0) {
xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
}
else {
xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
}
}
<div className="Chartdisplay__chart" id="chart" onScroll={handleScroll}>
<StockChart options={stockOptions} highcharts={Highcharts} />
</div>
我也尝试过像这样直接添加函数,但也没有运气:
let ar = [];
(function(H) {
Highcharts.Chart.prototype.callbacks.push(function(chart) {
H.addEvent(chart.container, 'mousewheel', function(e) {
var xAxis = chart.xAxis[0],
extremes = xAxis.getExtremes();
if (e.deltaY < 0) {
xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
}
else {
xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
}
});
});
}(Highcharts));
1条答案
按热度按时间6yt4nkrj1#
要在React.js中扩展Higstock,请将您要 Package 的代码放在配置对象(选项)之前。
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
现场演示:https://stackblitz.com/edit/react-hmvz2z?file=index.js