我正在使用chart.js v2创建图表,并从数据库中获取数据。
我想将工具提示标题从id_office []更改为name_office [],或者如果不可能,请在工具提示信息中添加新标签:name_office []。
目前,工具提示仅显示id_office []和bpu []数据。
这是我的代码
function chart_dashboard(data) {
var bpu = [];
var id_office = [];
var name_office = [];
for (i = 0; i < data.list_chart_dashboard.length; i++) {
var obj = data.list_chart_dashboard[i];
bpu.push(obj.penambahan_TK_BPU);
id_office.push(obj.id_office);
name_office.push(obj.name_office);
}
var chartdata = {
labels: id_office,
datasets : [{
label: 'BPU',
backgroundColor: [
'rgba(114, 12, 34, 0.2)'
],
borderColor: 'rgba(32,99,12,1)',
hoverBackgroundColor: 'rgba(34, 45, 50, 0.2)',
hoverBorderColor: 'rgba(89, 162, 134)',
borderWidth:1,
data: bpu
}]
};
var ctx = $("#chart_dashboard")[0].getContext('2d');
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
// Configuration options go here
options: {
responsive: true,
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
tooltips: {
"enabled": true
},
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontSize: 10,
//max: 300
//stepSize: 10
},
scaleLabel: {
display: true,
labelString: "employee BPU"
}
}]
}
}
});
}
因此工具提示变为
id_office, name_office, bpu
谢谢您的帮助,对不起我的英语不好。