折线图,当我单击任何特定点时我得到了数据,但问题是我想显示该特定点处于活动状态,而当我单击任何其他点时,第一个点要显示为不活动,第二个点要显示为活动
这是我的折线图代码。
chartClicked(e) {
var activePoints = this.Linechart.getElementsAtEventForMode(
e,"point",this.Linechart.options
);
var firstPoint = activePoints[0];
var label = this.Linechart.data.labels[firstPoint._index];
var value = this.Linechart.data.datasets[firstPoint._datasetIndex].data[
firstPoint._index
];
let existingPoints = this.Linechart.data.labels;
var elementIndex = activePoints[0]._index;
this.abcd = [];
existingPoints.forEach(element => {
console.log(this.abcd);
if (element === label) {
this.addPointConlor = this.Linechart.data.datasets[0].pointBackgroundColor[
elementIndex
] = "red";
} else {
this.addPointConlor = this.Linechart.data.datasets[0].pointBackgroundColor[
elementIndex
] = "blue";
}
});
这是我的折线图代码。
lineCart() {
const abc = [];
this.Linechart = new Chart("canvasGraph",{
type: "line",// label : "sagar ",data: {
// labels: this.Xdata,labels: ["1-10-2019","2-10-2019","3-10-2019","4-10-2019","5-10-2019","6-10-2019","7-10-2019"],datasets: [
{
data: [100,150,500,200,111,530,160],// data: this.Ydata,borderColor: "#ed1c24",backgroundColor: "transparent",radius: 5,label: "Request Chart",pointBackgroundColor: this.abcd
// fill : 'red',// pointHoverBackgroundColor : 'red',}
]
},options: {
onClick: this.chartClicked.bind(this),elements: {
line: {
tension: 0
}
},legend: {
display: true
},scales: {
xAxes: [
{
display: true
}
],yAxes: [
// {
// display: true
// }
{
stacked: true
}
]
}
}
});
// });
}