我需要在工具提示2中显示数据集中的值:
chartData2: {
labels: ["1 June", "15 June", "30 June"],
datasets: [
{
slabel: "Active Accounts",
data: [
{amount: 150000, percent: '+5.27%'},
{amount: 95000, percent: '+2.27%'},
{amount: 350000, percent: '+3.27%'}
],
},
{
slabel: "New Accounts",
data: [
{amount: 150000, percent: '+2.27%'},
{amount: 250000, percent: '+2.27%'},
{amount: 750000, percent: '+5.27%'}
],
}
]
},
如何解析工具提示中的第二个值?图表只能用amount
渲染,但第二个值必须在工具提示中。
我正在编写自定义工具提示函数,但我无法在工具提示示例中找到解析第二个值百分比的第二个值或索引
tooltip: {
// Disable the on-canvas tooltip
enabled: false,
external: (context) => {
// Tooltip Element
let tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
const titleLines = tooltipModel.title || [];
const bodyLines = tooltipModel.body.map(getBody);
console.log(tooltipModel)
let innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th class="chartjs-tooltip-title">' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach((body, i) => {
const colors = tooltipModel.labelColors[i];
let style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
const span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + this.data.datasets[i].slabel + ': <span class="tooltip-rl-text">' + body + '</span>' + '</td></tr>';
});
innerHtml += '</tbody>';
let tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
const position = context.chart.canvas.getBoundingClientRect();
// const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX - tooltipEl.clientWidth / 2 +'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 50 + 'px';
// tooltipEl.style.font = bodyFont.string;
tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
我能做什么?在工具提示中显示两个值,但只按金额绘制图表?
1条答案
按热度按时间syqv5f0l1#
所有的数据都可以在这样的上下文中获得:
示例:
第一个