我将chartistJS用于网页上的图表。我已经从图表专家提供的选项中了解了“ onClick”功能。
请在下面找到我的代码:
public horizontalBarchartoptions = {
'onClick' : function (evt, item) {
var index = item[0]['_index']
var reportId = latestScanReportID[index];
routingFunct.navigate(["./resultPage/"+reportId]);
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return " "+ Number(tooltipItem.xLabel)+" issue(s)";
}
}
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Volume'
},
display: true,
labelString: 'Density',
ticks: {
mirror: true,
autoSkip: false,
padding: -30,
fontColor: '#fff'
}}],
xAxes: [{
scaleLabel: {
display: true,
labelString: '# Issues'
},
ticks: {
min: 0,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.ceil(label) === label) {
return label;
}
}
},
}]
}
};
单击条形时,以上代码将重定向到该特定条形ID的结果页面以下是相同图片:In this image when clicked on scan 1 - scan 4 it is redirected to results page当单击扫描5时,由于扫描5的值为0
,它将引发以下异常。ERROR TypeError: Cannot read property '_index' of undefined
我可以从-1开始标注轴标签,但这不是首选的解决方案,请您提出另一种解决此问题的方法。
提前感谢
我建议至少在'item'没有元素时进行处理:
public horizontalBarchartoptions = {
'onClick' : function (evt, item) {
if (item != null && item != undefined) {
if (item.length > 0) {
var index = item[0]['_index']
var reportId = latestScanReportID[index];
routingFunct.navigate(["./resultPage/"+reportId]);
}
}
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return " "+ Number(tooltipItem.xLabel)+" issue(s)";
}
}
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Volume'
},
display: true,
labelString: 'Density',
ticks: {
mirror: true,
autoSkip: false,
padding: -30,
fontColor: '#fff'
}}],
xAxes: [{
scaleLabel: {
display: true,
labelString: '# Issues'
},
ticks: {
min: 0,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.ceil(label) === label) {
return label;
}
}
},
}]
}
};
希望这会有所帮助。