Javascript 是否可以在react-chart-js2中隐藏图表上显示的悬停值
我已经使用react-chartjs-2库实现了一个饼图。我在显示/隐藏悬停在图表上时出现的工具提示时面临问题Javascript 是否可以在react-chart-js2中隐藏图表上显示的悬停值,javascript,reactjs,react-chartjs-2,Javascript,Reactjs,React Chartjs 2,我已经使用react-chartjs-2库实现了一个饼图。我在显示/隐藏悬停在图表上时出现的工具提示时面临问题 import React, { PropTypes } from 'react'; import {Pie} from 'react-chartjs-2'; class PieChart extends React.Component { constructor(props, context) { super(props, context);
import React, { PropTypes } from 'react';
import {Pie} from 'react-chartjs-2';
class PieChart extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
};
}
render() {
let color = ['#1f77b4', '#ff7f0e'];
let cTDcolor = {
"Being Assessed": "#4472c4",
"Not Started": "#ed7d31",
"No Data": "#a5a5a5"
};
let chartData = [], label = [], colorCTDArray = [];
let keyAttr = this.props.keyAttribute;
let valueAttr = this.props.valueAttribute;
const priorityArray = ["Low","Medium","High","Pending"];
if(this.props.chartSeries != undefined && this.props.chartSeries != null) {
this.props.chartSeries.sort(function(a, b){
var firstPrio = priorityArray.indexOf(a.complexity);
var secPrio = priorityArray.indexOf(b.complexity);
return firstPrio -secPrio
});
this.props.chartSeries.map(function(element) {
chartData.push(element[valueAttr]);
label.push(element[keyAttr]);
});
}
//Sorting colors...
label.map(function(item) {
colorCTDArray.push(cTDcolor[item]);
});
const options = {
legend: {
labels: {
boxWidth: 12
}
},
plugins: {
datalabels: {
display: false
}
}
};
let data;
data = {
labels: label,
datasets: [{
data: chartData,
backgroundColor: colorCTDArray,
hoverBackgroundColor: colorCTDArray
}]
};
return (
<div>
<Pie data={data} height={this.props.height} options={options} />
</div>
);
}
}
PieChart.propTypes = {
chartSeries: React.PropTypes.array,
height: React.PropTypes.number,
color: React.PropTypes.array,
keyAttribute: React.PropTypes.string,
valueAttribute: React.PropTypes.string,
isCTD: React.PropTypes.bool,
isPie: React.PropTypes.bool
};
export default PieChart;
import React,{PropTypes}来自'React';
从'react-chartjs-2'导入{Pie};
类PieChart扩展了React.Component{
构造函数(道具、上下文){
超级(道具、背景);
此.state={
};
}
render(){
设颜色=['#1f77b4','#ff7f0e'];
设cTDcolor={
“正在评估”:“4472c4”,
“未启动”:“ed7d31”,
“无数据”:“#a5a5a5”
};
让chartData=[]、label=[]、colorCTDArray=[];
让keyAttr=this.props.keyAttribute;
让valueAttr=this.props.valueAttribute;
常量优先级数组=[“低”、“中”、“高”、“待定”];
if(this.props.chartSeries!=未定义&&this.props.chartSeries!=空){
this.props.chartSeries.sort(函数(a,b){
var firstPrio=priorityArray.indexOf(a.complexity);
var secPrio=priorityArray.indexOf(b.complexity);
返回第一优先级-第二优先级
});
this.props.chartSeries.map(函数(元素){
chartData.push(元素[valueAttr]);
label.push(元素[keyatt]);
});
}
//排序颜色。。。
label.map(功能(项){
彩色ctdarray.push(cTDcolor[item]);
});
常量选项={
图例:{
标签:{
箱宽:12
}
},
插件:{
数据标签:{
显示:假
}
}
};
让数据;
数据={
标签:标签,
数据集:[{
数据:图表数据,
背景颜色:ColorcDarray,
hoverBackgroundColor:colorCTDArray
}]
};
返回(
);
}
}
PieChart.propTypes={
chartSeries:React.PropTypes.array,
高度:React.PropTypes.number,
颜色:React.PropTypes.array,
keyAttribute:React.PropTypes.string,
valueAttribute:React.PropTypes.string,
isCTD:React.PropTypes.bool,
isPie:React.PropTypes.bool
};
导出默认图形;
通过从UI端传递的虚拟数据,它显示如上所示:
我不想在图表悬停时显示工具提示
无数据
。如果它可以为每个状态变量隐藏,或者只为无数据
隐藏,就可以了。两者都能达到我的目的。我不确定,因为它可以显示/隐藏哪个对象。有人能帮我隐藏工具提示吗。要隐藏每个状态的工具提示还是只隐藏没有数据的工具提示?可以隐藏每个状态的工具提示。