我有一个使用chart.js构建的条形图,点击特定的条形图可获取一个额外的数据国家(这将返回两个值)
我想在我尝试过的工具提示中显示数据值:工具提示和标签的回调,但无法执行此操作,请有人可以知道如何实现
buildTheBarChart() {
this.barChartService.getDataForSitesConnected();
this.barChartService.getDataForSitesConnected().then((countryValue: any[]) => {
this.countryValue = countryValue;
console.log('the response is ' , countryValue[0].countryName);
this.countryNames = [];
this.countOfSites = [];
this.countryIdArray = [];
for (let i = 0 ; i < countryValue.length; i++) {
this.countryNames.push(countryValue[i].countryName);
this.countOfSites.push(countryValue[i].countSites);
this.countryIdArray.push(countryValue[i].countryId);
}
this.sitesCount = this.countOfSites;
// tslint:disable-next-line:radix
this.BarChart = new Chart('barChart', {
type: 'bar',
data: {
labels : this.countryNames,
datasets: [{
label: 'Sites Connected ',
Label: this.countryIdArray,
data: this.sitesCount,
backgroundColor : [
'rgba(234,104,32,1)',
'rgba(20,133,221,1)',
'rgba(156,204,51,1)',
'rgba(234,104,32,1)',
],
borderColor: [ ],
borderWidth: 1
}]
},
options: {
events: ['click'],
onClick: (c, i) => {
// tslint:disable-next-line:prefer-const
let countryLabel;
countryLabel = i[0]._model.label;
this.updateByName = {
'countryName': countryLabel
};
console.log(countryLabel);
this.updatedbarData();
this.barChartService.getDataForConnectedsitesByCountry(this.updateByName).then((sitesValues: any[]) => {
this.sitesValues = sitesValues;
this.onlineSites = this.sitesValues.online;
this.oflineSites = this.sitesValues.offline;
console.log('the OflineSites are ' , this.onlineSites, this.oflineSites );
});
},
legend: {
display: false,
labels: {
fontColor: 'Black',
fontSize: 16
},
},
title: {
text : 'Total Sites',
display: true,
fontSize: 23,
fontColor: '#000'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Count',
fontColor: 'black',
fontSize: 20
},
ticks: {
beginAtZero : true,
userCallback: function(label, index, labels) {
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Country',
fontColor: 'black',
fontSize: 20
}
}]
}
}
});
});
}
这是我的代码,在onClick中,我正在获取存储在this.oflinesites和this.onlinesites
中的数据所以请您帮我把这两个值放在工具提示中