私のアプリケーションでは、react-vis を使用して 2 つのライン マーク シリーズを表示しています。マークにマウスを乗せるとヒントが表示されます。場合によっては、このマウスオーバーがトリガーされません。私は以下のコードを与えました。
import React, { Component } from 'react'; import {XAxis, FlexibleWidthXYPlot, YAxis, LineMarkSeries, Hint} from "react-vis"; import './App.css';
class App extends Component {
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 ?
<Hint value={this.state.hintData}>
<div style={{background: 'black'}}>
{this.state.hintData.x} <br/>
{this.state.hintData.y}
</div>
</Hint> : 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},{"x":"2019-22","y":125116.6517},{"x":"2019-23","y":129482.6028},{"x":"2019-24","y":113765.7181},{"x":"2019-25","y":128028.6767},{"x":"2019-26","y":133071.9467},{"x":"2019-27","y":129452.9942},{"x":"2019-28","y":144334.7556},{"x":"2019-29","y":131803.2536},{"x":"2019-30","y":128058.7279},{"x":"2019-31","y":132920.1875},{"x":"2019-32","y":139728.7424},{"x":"2019-33","y":140404.7564},{"x":"2019-34","y":142156.6469},{"x":"2019-35","y":145447.9253},{"x":"2019-36","y":139281.1122},{"x":"2019-37","y":128056.8897},{"x":"2019-38","y":76217.5228},{"x":"2019-39","y":140638.7192},{"x":"2019-40","y":140774.4656},{"x":"2019-41","y":137503.2008},{"x":"2019-42","y":138770.9367},{"x":"2019-43","y":62433},{"x":"2019-44","y":104521.0036},{"x":"2019-45","y":41243.8242}];
return (
<div className ="result-table">
<FlexibleWidthXYPlot xType="ordinal" height={330} margin={{ left: 80 }}>
<XAxis tickFormat={this.tickFormat}/>
<YAxis />
<LineMarkSeries data={ly}
onValueMouseOver={this.mouseOver}
onValueMouseOut={this.mouseOut}
size="2"
stroke="red"
fill="red"
/>
<LineMarkSeries data={ty}
onValueMouseOver={this.mouseOver}
onValueMouseOut={this.mouseOut}
size="2"
/>
{this.getHintSection(this.state.hintHover)}
</FlexibleWidthXYPlot>
</div>
);
}
}
デフォルトのアプリをエクスポートします。
