条形图中每个条形顶部的水平线- ChartJs 4.4

hc2pp10m  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(168)

我想为每个条形图绘制一个目标线,如下所示,


的数据
我使用的是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
                        }
                    }
                }
            });

        };

字符串
任何帮助将不胜感激

j8yoct9x

j8yoct9x1#

假设您试图用WeekTarget绘制水平线。
首先,您需要包含chartjs-plugin-annotation库。

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>

字符串
接下来,您需要构建annotations对象,以正确的y轴值、x轴长度、样式等绘制直线。

let weektarget = WeeklyData.map((y) => y.WeekTarget);

var annotations = weektarget.reduce(function (acc, cur, i) {
    acc[`line${i}`] = {
      type: 'line',
      yMin: cur,
      yMax: cur,
      xMin: -0.25 + i,
      xMax: 0.25 + i,
      borderColor: 'black',
      borderWidth: 2,
    }

    return acc;
  }, {});


最后,在options.plugins.annotation.annotations中添加annotations对象。

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,
        },
        annotation: {
          annotations: annotations
        }
      },
    },
  });


JS Demo @ StackBlitz
结果


的数据

相关问题