我希望能够(在图表加载时)在图表上的特定点上显示“十字准线”。
我现在的十字准线正确显示了来自 9 y 轴的数据(x 轴是时间一)。
我已经搜索了文档和示例,但无法看到任何此类内容。
准星文档: https ://uber.github.io/react-vis/documentation/api-reference/crosshair https://github.com/uber/react-vis/blob/master/docs/crosshair.md
React vis 事件处理程序: https ://github.com/uber/react-vis/blob/master/docs/interaction.md
React vis 示例: https ://uber.github.io/react-vis/
import {
XYPlot,
XAxis,
YAxis,
VerticalGridLines,
HorizontalGridLines,
LineSeries,
Crosshair
} from 'index';
const DATA = [
[{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}],
[{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]
];
export default class DynamicCrosshair extends React.Component {
constructor(props) {
super(props);
this.state = {
crosshairValues: []
};
}
/**
* Event handler for onMouseLeave.
* @private
*/
_onMouseLeave = () => {
this.setState({crosshairValues: []});
};
/**
* Event handler for onNearestX.
* @param {Object} value Selected value.
* @param {index} index Index of the value in the data array.
* @private
*/
_onNearestX = (value, {index}) => {
this.setState({crosshairValues: DATA.map(d => d[index])});
};
render() {
return (
<XYPlot onMouseLeave={this._onMouseLeave} width={300} height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries onNearestX={this._onNearestX} data={DATA[0]} />
<LineSeries data={DATA[1]} />
<Crosshair
values={this.state.crosshairValues}
className={'test-class-name'}
/>
</XYPlot>
);
}
}
在事件处理程序部分,有一个事件处理程序列表,但需要用户操作。我希望根据传递给它的状态来改变十字准线的位置。
根据我已经看到的,我不确定这是否可能?我不需要工具提示部分,所以我可以没有它,我所需要的只是十字准线。
感谢您对此提供的任何帮助/对此的回答。