我想为每个条形图绘制一个目标线,如下所示,
的数据
我使用的是Chart Js 4.4。这是我实现条形图的代码。我试图添加另一个数据集,但它没有正确Map。而且x轴标签显示了两次。
var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
console.log(WeeklyData);
let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
console.log(weeklylabels);
let weeklydatasets = (WeeklyData.map((y) => y.TotalActual));
console.log(weeklydatasets);
//let weektarget = (WeeklyData.map((y) => y.WeekTarget));
//console.log(weektarget);
var barChartDataWeekly = {
labels: weeklylabels,
datasets: [
{
data: weeklydatasets,
backgroundColor: 'rgba(0, 154, 221, 1)'
}
],
};
window.onload = function () {
var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
window.myBar = new Chart(ctxUPHHistory, {
type: 'bar',
data: barChartDataWeekly,
options: {
responsive: true,
maintainAspectRatio: false,
parsing: {
xAxisKey: 'Day',
yAxisKey: 'TotalActual'
},
scales: {
y: {
ticks: {
beginAtZero: true
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
};
字符串
任何帮助将不胜感激
1条答案
按热度按时间j8yoct9x1#
假设您试图用
WeekTarget
绘制水平线。首先,您需要包含chartjs-plugin-annotation库。
字符串
接下来,您需要构建
annotations
对象,以正确的y轴值、x轴长度、样式等绘制直线。型
最后,在
options.plugins.annotation.annotations
中添加annotations
对象。型
JS Demo @ StackBlitz的
结果
的数据