我正在使用chartjs和Angular 7开发仪表板,我需要显示工具提示中来自对象的一些信息。
我能够在控制台日志中获取该对象,但是我不知道如何从函数内部的订户获取值,该值使我可以在屏幕上显示自定义工具提示。
这是我的代码。
ngOnInit() {
this.batches.forEach(batch => {
let batchID = batch.batch_id;
this.dashboardService.getBatchId(batchID).subscribe(singleBatch => {
this.batch = singleBatch;
console.log(this.batch)
let batchName = this.batch.name //<-- THIS IS MY VARIABLE
console.log(batchName)
})
})
}
Duration = {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table style="background-color: #eee;"></table>';
document.body.appendChild(tooltipEl);
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || [];
var bodyLines = tooltipModel.body.map(getBody);
innerHtml += '<tbody>';
bodyLines.forEach(function(body, i) {
var span = '<span>' +
'<p>Batch: </p>' + //<----HERE IT IS THE PLACE WHERE I WANT TO PUT BATCHNAME
'</span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
}
}
}
};
提前谢谢。
答案 0 :(得分:0)
我要使用伪代码,因为我不在开发机器上。
在您的代码中,您已经有一个用于批次的变量,例如this.batches,那么为什么要回到服务中获取批次呢?例如
transition
您只需要一个函数即可显示工具提示,例如
updated fiddle
然后您应该从html调用它
this.batches.forEach(batch => { console.log(batch.name) });