ChartJS 基于条件显示注解线

vbkedwbf 于 2023-11-18 发布在 Chart.js

关注(0)|答案(1)|浏览(157)

我想根据某些条件在条的顶部显示水平线。x1c 0d1x
如图所示，我想只显示到星期二的水平线，这意味着我想只显示到前一天的水平线。
请在下面找到我的代码
let daytarget = WeeklyData.map（（y）=> y.DayTarget）;

var annotations = daytarget.reduce(function (acc, cur, i) {
    acc[`line${i}`] = {
      type: 'line',
      yMin: cur,
      yMax: cur,
      xMin: -0.15 + i,
      xMax: 0.15 + i,
      borderColor: 'white',
      borderWidth: 10,
    }            
    return acc;            
  }, {});

var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [
        {
            data: WeeklyData,
            backgroundColor: function (value, context) {   
                console.log(value.TotalActual)
                if (value.raw.TotalActual >= value.raw.DayTarget) {
                    return 'rgba(0, 154, 221, 1)';
                }
                else {
                    return 'rgba(176, 35, 25, 1)';
                }
            }
                               
        }
    ],
};

字符串
是否有可能为注解提供给予条件？感谢您的帮助！

chart.js

来源：https://stackoverflow.com/questions/77400209/showing-annotation-line-based-on-condition

1条答案

按热度按时间

woobm2wo1#

要删除条形图中显示的水平线，您不应该为annotations对象提供线（对象）。
从我在你的图上看到的，“Wed”的数据从DayTarget开始，TotalActual为0。你可以通过过滤DayTarget大于0的数据来操作数据。

let daytarget = WeeklyData.filter((y) => y.DayTarget).map((y) => y.DayTarget);

字符串
Demo @ StackBlitz
这将很难通过DayName操作数据。因为比较字符串中的值和你的开始日期是星期六。如果今天是星期六，数据是什么样子的？
除非您的数据提供了日期值，否则您可以过滤今天日期之前的数据。

let today = new Date(new Date().toDateString());

let daytarget = WeeklyData.filter((y) => y.Date < today)
  .map((y) => y.DayTarget);

型

赞(0）回复(0）举报 2023-11-18

我来回答

ChartJS 基于条件显示注解线

1条答案

相关问题

热门标签

最新问答