如何在chartjs中使用日期标签作为Y轴

Question

根据下面的图表，如何显示 Y 刻度线的自定义 HTML 标签？

  const yAxisLabelsLookup = {
    0: {
      label: '2024-01-01',
      color: 'red',
    },
    1: {
      label: '2024-01-02',
      color: 'blue',
    },
    2: {
      label: '2024-01-03',
      color: 'green',
    },
    3: {
      label: '2024-01-04',
      color: 'yellow',
    },
  }
  const ctx = document.getElementById('chart-container');

  const data = {
    datasets: [{
      label: 'First Dataset',
      data: [
        {
          x: 20,
          y: 0,
          r: 15
        }, {
          x: 40,
          y: 0,
          r: 10
        },
        {
          x: 20,
          y: 1,
          r: 10
        },
        {
          x: 40,
          y: 1,
          r: 10
        },
        {
          x: 25,
          y: 2,
          r: 10
        },
        {
          x: 35,
          y: 2,
          r: 10
        },
      ],
      backgroundColor: 'rgb(255, 99, 132)'
    }]
  };

  const chart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: {
      // So we can set the height with css.
      // maintainAspectRatio: false,
      responsive: true,
      scales: {
        x: {
          type: 'time',
          // time: {
          //   displayFormats: {
          //     quarter: 'MMM YYYY'
          //   }
          // }
          position: 'top',
          ticks: {
            padding: 15,
          },
        },
        y: {
          // display: false,
          ticks: {
            padding: 25,
            callback: function (value) {
              if (value in yAxisLabelsLookup) {
                const label = yAxisLabelsLookup[value].label;
                const color = yAxisLabelsLookup[value].color;
                return `<span style="color: ${color};">${label}</span>`;
              } else {
                // Return the default numeric value if no custom label is found
                return value;
              }
              // if (value in dateLookupMap) {
              //   return dateLookupMap[value]
              // } else {
              //   return ''
              // }
            }
          }
        },
      }
    }
  });

Answer 1

chart.js

使用canvas来渲染图表；您无法返回 html 来格式化图表内的内容。 所有可用选项 通过配置对象来设置。

一些选项是可编写脚本的， 这意味着该值可以是一个函数，只有在需要该选项时才会调用该函数，并且 应该根据上下文返回选项的实际值，类似于

callback

的做法 勾选标签文本。

刻度标签颜色可以通过

options.scales.y.ticks.color

设置，如果需要的话可以通过编程方式设置，因为它 is 可编写脚本。同样，您可以使用

options.scales.y.ticks.font

设置标签的其他视觉属性，例如尺寸或重量。

您的代码可以更改为：

   options: {
       // .... other options
       scales: {
         // x ....
          y: {
              ticks: {
                 callback: function (value) {
                    if (value in yAxisLabelsLookup) {
                       return yAxisLabelsLookup[value].label;
                    } else {
                       return value;
                    }
                 },
                 color: function({tick: {value}}){
                    if (value in yAxisLabelsLookup){
                       return yAxisLabelsLookup[value].color;
                    }
                 }
              }
          }
       }
   }

片段：

const yAxisLabelsLookup = {
    0: {
        label: '2024-01-01',
        color: 'red',
    },
    1: {
        label: '2024-01-02',
        color: 'blue',
    },
    2: {
        label: '2024-01-03',
        color: 'green',
    },
    3: {
        label: '2024-01-04',
        color: 'yellow',
    },
}

const data = {
    datasets: [{
        label: 'First Dataset',
        data: [
            {
                x: 20,
                y: 0,
                r: 15
            }, {
                x: 40,
                y: 0,
                r: 10
            },
            {
                x: 20,
                y: 1,
                r: 10
            },
            {
                x: 40,
                y: 1,
                r: 10
            },
            {
                x: 25,
                y: 2,
                r: 10
            },
            {
                x: 35,
                y: 2,
                r: 10
            },
        ],
        backgroundColor: 'rgb(255, 99, 132)'
    }]
};
const chart = new Chart('chart-container', {
    type: 'bubble',
    data: data,
    options: {
        // So we can set the height with css.
        // maintainAspectRatio: false,
        responsive: true,
        scales: {
            x: {
                type: 'time',
                // time: {
                //   displayFormats: {
                //     quarter: 'MMM YYYY'
                //   }
                // }
                position: 'top',
                ticks: {
                    padding: 15,
                },
            },
            y: {
                ticks: {
                    padding: 25,
                    callback: function (value) {
                        if (value in yAxisLabelsLookup) {
                            return yAxisLabelsLookup[value].label;
                        } else {
                            return value;
                        }
                    },
                    color: function({tick: {value}}){
                        if (value in yAxisLabelsLookup){
                            return yAxisLabelsLookup[value].color
                        }
                    }
                }
            },
        }
    }
});

<div style="max-height: 70vh">
    <canvas id="chart-container"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>