我正在显示一个条形图,其中包含三个不同的信息(项目名称、剩余天数和结束日期)。我在一个轴上显示项目名称,剩余天数决定条形图的高度。当前,当我将鼠标悬停在条形图上时,工具提示会显示x轴和y轴上已有的信息。我希望它具有结束日期。
即:项目“B”将在2天内结束(8月4日),当我将鼠标悬停在栏上时,我希望工具提示显示“End date of 2022-08-04”而不是“b Work Days Remaining:2英寸
我的json的数据看起来像这样:
[{"po_num": "a", "days_rem": 10, "date_end": "2022-08-16"},
{"po_num": "b", "days_rem": 2, "date_end": "2022-08-04"},
{"po_num": "c", "days_rem": 6, "date_end": "2022-08-10"}]
https://i.stack.imgur.com/HefRz.png这是我正在尝试做的事情的MS绘制渲染:https://i.stack.imgur.com/GAT2I.png
实现代码:
link = "{{{BASE_BACK_URL}}}";
$.getJSON(link, function (data) {
let po_names = [];
let days_rem = [];
for (let i = 0; i < data.length; i++) {
po_names.push(data[i]["po_num"]);
days_rem.push(data[i]["days_rem"]);
}
const ctx = document.getElementById('po-timeline-chart');
const myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: po_names,
datasets: [{
label: 'Work Days Remaining',
data: days_rem,
backgroundColor: 'rgb(0, 89, 178)'
}],
},
options: {
legend: {
align: "end"
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
1条答案
按热度按时间dohp0rv51#
解决方案如下: