在我的应用程序中,我正在使用react-vis显示两个线标记系列。当鼠标悬停在标记上时,将显示提示。在某些情况下,不会触发此鼠标悬停。我已经给出了下面的代码。
从'react'导入React,{组件};
从“ react-vis”导入{XAxis,FlexibleWidthXYPlot,YAxis,LineMarkSeries,Hint};
导入'./App.css';
类应用扩展了组件{
constructor(props) {
super(props);
this.state = {
hintData : {},hintHover : false
};
this.tickFormat = this.tickFormat.bind(this);
this.getHintSection = this.getHintSection.bind(this);
this.mouseOver = this.mouseOver.bind(this);
this.mouseOut = this.mouseOut.bind(this);
}
tickFormat(key) {
const splitString = "-";
const splittedKey = key.split(splitString);
const week = splittedKey[1];
return week;
}
getHintSection(isHintVisible) {
return isHintVisible ?
{this.state.hintData.x}
{this.state.hintData.y}
: null;
}
mouseOver(datapoint) {
this.setState({hintData : datapoint,hintHover :true});
}
mouseOut(datapoint) {
this.setState({hintData : datapoint,hintHover :false});
}
render() {
let ly = [{"x":"2019-21","y":141270.4113},{"x":"2019-22","y":148032.6853},{"x":"2019-23","y":133166.3549},{"x":"2019-24","y":144555.8317},{"x":"2019-25","y":148989.326},{"x":"2019-26","y":154936.6971},{"x":"2019-27","y":143121.3033},{"x":"2019-28","y":127417.6843},{"x":"2019-29","y":137611.2275},{"x":"2019-30","y":155303.9058},{"x":"2019-31","y":159145.5424},{"x":"2019-32","y":147832.1768},{"x":"2019-33","y":140558.6808},{"x":"2019-34","y":163493.7706},{"x":"2019-35","y":158733.5571},{"x":"2019-36","y":153541.6172},{"x":"2019-37","y":153952.6542},{"x":"2019-38","y":109995.8389},{"x":"2019-39","y":143138.1519},{"x":"2019-40","y":145308.4907},{"x":"2019-41","y":157985.7649},{"x":"2019-42","y":125786.7651},{"x":"2019-43","y":172169.0872},{"x":"2019-44","y":157065.8774},{"x":"2019-45","y":158571.5438},{"x":"2019-46","y":144577.6178},{"x":"2019-47","y":143184.0778},{"x":"2019-48","y":152131.5728},{"x":"2019-49","y":144523.9783},{"x":"2019-50","y":138136.235},{"x":"2019-51","y":144134.0461},{"x":"2019-52","y":131489.7967},{"x":"2019-53","y":20350.7817},{"x":"2020-01","y":89539.0572},{"x":"2020-02","y":132872.9236},{"x":"2020-03","y":106450.4828},{"x":"2020-04","y":109363.71},{"x":"2020-05","y":123938.9689},{"x":"2020-06","y":133286.4406},{"x":"2020-07","y":132281.1586},{"x":"2020-08","y":120349.3911},{"x":"2020-09","y":139654.5261},{"x":"2020-10","y":138938.9757},{"x":"2020-11","y":143939.1749},{"x":"2020-12","y":136084.7265},{"x":"2020-13","y":83493.8253},{"x":"2020-14","y":111638.4639},{"x":"2020-15","y":127725.7994},{"x":"2020-16","y":129957.4428},{"x":"2020-17","y":138573.7561},{"x":"2020-18","y":99871.6431}];
let ty = [{"x":"2019-21","y":123902.6944},"y":125116.6517},"y":129482.6028},"y":113765.7181},"y":128028.6767},"y":133071.9467},"y":129452.9942},"y":144334.7556},"y":131803.2536},"y":128058.7279},"y":132920.1875},"y":139728.7424},"y":140404.7564},"y":142156.6469},"y":145447.9253},"y":139281.1122},"y":128056.8897},"y":76217.5228},"y":140638.7192},"y":140774.4656},"y":137503.2008},"y":138770.9367},"y":62433},"y":104521.0036},"y":41243.8242}];
return (
stroke="red"
fill="red"
/>
OnValueMouseOver={this.mouseOver}
OnValueMouseOut={this.mouseOut}
size="2"
/>
{this.getHintSection(this.state.hintHover)}
);
}
}
导出默认应用;
![当两个线标记系列在react-vis中重叠时 当两个线标记系列在react-vis中重叠时](https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg)
您可以使用2个LineSeries和1个MarkSeries,并且只能在MarkSeries上使用一个回调。下面的示例:
data={dataOne}
/>
data={dataTwo}
/>
data={[...dataOne,...dataTwo]}
OnNearestXY={(val,{index}) => {
//do smth
}}
/>