以下是我们用于显示折线图的代码。但是,我们没有看到启用工具提示。有关寻找什么的任何建议?对不起新的反应框架。区域图的类似代码可以正常使用工具提示。
import React, { Component } from 'react';
import D3Chart from '../area/D3Chart';
import DataUtils from '../../utils/DataUtils';
export default class LineChart extends Component {
xTicksFormat(d) {
if (this.props.xMappingData) {
let retVal = DataUtils.findMapping(this.props.xMappingData, d-1);
if (retVal)
return retVal;
else
return '';
}
else if (this.props.xMappingData2) {
let retVal = DataUtils.findMapping2(this.props.xMappingData2, d);
if (retVal)
return retVal;
}
else
return d;
}
yTicksFormat(d) {
return d;
}
render(){
var data= this.props.data;
var margin={
top: 50, right: 30, bottom: 50, left: 50
};
return(
<div className="row outerbox bigChart">
<div className="col-md-12 custom_padding" >
<D3Chart data={data} xData="x" yData="y" margin={margin} interpolations="basis" xMaxBuffer={-30}
yMaxBuffer={20} id="line-chart" width={480} height={400} type="line">
<yGrid orient="left" className="y-grid" ticks={12} title={data.yTitle} ticksFormat={this.yTicksFormat.bind(this)}/>
<xGrid orient="bottom" className="x-grid" ticks={5} title={data.xTitle} ticksFormat={this.xTicksFormat.bind(this)}/>
<line />
<path className="line shadow" strokeLinecap="round"/>
<tooltip textStyle1="tooltip-text1"
textStyle2="tooltip-text1" bgStyle="tooltip-bg"
xValue="Date" yValue="Count"/>
{/*<axisTitle text={data.xTitle} axisType='x' />
<axisTitle text={data.yTitle} axisType='y'/> */}
</D3Chart>
</div>
<span className="chartPadding"></span>
</div>
);
}
}