如何使用 chart.js 在时间轴上 highlight/format 特定日期标签（例如今天）？

Question

我有一张 X 轴为时间线的图表。以下是ChartOptions的相关摘录：

scales:
      {
        xAxes:
          [
            {
              display: true,
              type: 'time',
              time: {
                unit: this.shortPeriod ? 'day' : 'week',
                displayFormats: {
                  day: 'ddd',
                  week: '[W] W'
                },
                isoWeekday: true,
                display: false,
                tooltipFormat: 'dddd DD. MMM'
              }
            }
          ]
       }

一周示例：

现在我想adjust/format一个特定的日期标签，比如

将今天的日期替换为标签 "Today"
将字体粗细增加到bold

知道如何实现吗？

Answer 1

您可以将任何自定义格式应用于 return 文本 "Today"：https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

在 3.0 中（目前处于 alpha 阶段），您可以使用可编写脚本的刻度选项使您选择的单个刻度变为粗体：

fontStyle: function(context) {
        return context.index === 0 ? 'bold' : undefined;
},

https://www.chartjs.org/docs/next/axes/styling.html#tick-configuration

如何使用 chart.js 在时间轴上 highlight/format 特定日期标签（例如今天）？

How can I highlight/format a specific date label (e.g. today) on a time axis using chart.js?

chart.js

vue-chartjs

chartjs-2.6.0