我正在使用chart.js v.2. library,当用户将鼠标悬停在图表的点上时,我试图将光标样式更改为“指针”。(我将在条形图、饼图、折线图中使用此选项)。看起来charts.js v.2中应该支持此选项。但我在任何地方都找不到示例。
编辑:我没有提到我使用的是带有React的Chart,更具体地说,我使用的是这个react wrapper。
我正在导入例如图表线import { Line } from 'react-chartjs-2';
class ChartTimelineChart extends Component {
constructor(props){
super(props);
this.options = {
responsive: true,
maintainAspectRatio: false,
animation: {
easing: 'easeOutCirc',
duration: 1000
},
pointStyle : 'circle',
scales: {
xAxes: [{
display: true,
gridLines: {display: false},
scaleLabel: {display: true}
}],
yAxes: [{
display: true,
gridLines: {display: false},
ticks: {beginAtZero:true},
scaleLabel: {display: true}
}]
},
tooltips: {
displayColors: false
},
legend: false
};
searchChart(elem, props, data) {
//Something...
}
render(){
return (
(this.props.selectedYears.length)
? ( <div>
<Line data={this.props.selectedYearsData}
redraw={true}
options={this.options}
getElementAtEvent={elem => this.searchChart(elem, this.props, this.props.selectedYearsData)} />
</div>)
: <Line data={{datasets: [], labels: []}}
redraw={true}
options={this.options} />
)
}
};
3条答案
按热度按时间new9mtju1#
在Chart.js 2.x中,我使用了这种方法,只需在选项中添加以下内容:
希望有帮助。
vof42yt12#
我只是为一个条形图做了这个,但我相信这个解决方案对你也适用。有一个叫做“chart-hover”的属性,你可以在其中设置一个回调。它在你每次进入和离开条形图时被触发。
这是我的“画布”的样子:
这是 onHover 在我的控制器上的显示:
azpvetkf3#
在chart.js v2.9.4中,为了确保悬停效果仅在实际悬停在数据点上时才存在,我在
options
中执行了以下操作:希望这个有用。