在选项对象中设置高库存 x轴范围

Question

My React 组件为 API 提取数据。yAxis 的options.series.data数据是接收 API 数据的内容。

该组件可以拉取天/小时/分钟的数据范围，该范围带有记录数据时间的日期戳。如何动态设置 xAxis 最小/最大范围以遵循天/小时/分钟持续时间变化？

HighchartsReact 实例通过options对象接收数据系列，我想在其中设置动态 xAxis 处理程序方法。也许是setExtemes().

组件代码如下。

import React, { Fragment, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highchartsStockChart from 'highcharts/modules/stock';
import { getDaily, getHourly, getMinute } from '../actions/getData';
import Spinner from './Spinner';
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
highchartsStockChart(Highcharts);
const Chart = ({
match,
list: { list, loading },
getDaily,
getHourly,
getMinute,
error
}) => {
const [method, setMethod] = useState(() => getDaily);
useEffect(() => {
method(match.params.currency.toUpperCase(), 30);
}, [match.params.currency, method]);
console.log('Chart.js list:', list);
console.log('Chart.js error:', error);
console.log('Chart.js loading:', loading);
const options = {
title: {
text: 'Close Price'
},
series: [{
name: 'close price',
data: list.map(item => item.close),
tooltip: {
pointFormat: 'close price: ${point.y:,.2f}'
},
animation: false
}],
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
buttonSpacing: 10,
buttonPosition: {
align: 'left'
},
buttons: [{
type: 'day',
count: 1,
text: 'Day',
events: {
click: () => setMethod(() => getDaily)
}
}, {
type: 'hour',
count: 1,
text: 'Hour',
events: {
click: () => setMethod(() => getHourly)
}
}, {
type: 'minute',
count: 1,
text: 'Minute',
events: {
click: () => setMethod(() => getMinute)
}
}]
}
};
let content;
if (error && error.message) {
content = error.message;
} else if (!list.length || loading) {
content = <Spinner />;
} else {
content = (
<Fragment>
{list.map(item => <span key={item.time}>{item.close} </span>)}
<button onClick={() => setMethod(() => getHourly)}>set Hourly</button>
<button onClick={() => setMethod(() => getMinute)}>set Minute</button>
<HighchartsReact
highcharts={Highcharts}
options={options}
constructorType={'stockChart'}
/>
</Fragment>
);
}
return (
<div>
Chart.
{content}
</div>
);
};
const mapStateToProps = state => ({
list: state.data,
error: state.error
});
export default connect(mapStateToProps, { getDaily, getHourly, getMinute })(Chart);

Answer 1

您可以：

• 使用 chartredraw事件回调函数并调用setExtremes：

---

chart: {
events: {
redraw: function() {
if (allowChartRedraw) {
allowChartRedraw = false;
this.xAxis[0].setExtremes(0, Math.random() * 3);
}
allowChartRedraw = true;
}
}
}

现场示例：http://jsfiddle.net/BlackLabel/wvpnct9h/

API 参考：https://api.highcharts.com/highcharts/chart.events.redraw

---

• 将所有选项保持在一种状态，并通过min和max属性操作轴极值：

---

componentDidMount() {
this.setState({
chartOptions: {
series: [
{
data: [Math.random() * 3, Math.random() * 3, Math.random() * 3]
}
],
xAxis: {
min: 0,
max: Math.random() * 3
}
}
});
}

现场演示：https://codesandbox.io/s/highcharts-react-demo-jo6nw

---

• 获取图表参考并在xAxis上调用setExtremes。

文档：https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance