如何在图表js中的每个点标签上应用两种颜色？

Question

我正在努力显示雷达图。我需要在每个点标签中应用两种颜色。下面附有一张图片。例如，如果第一个标签“吃 65 / 28”，则 65 为红色，28 为蓝色。 我已在其上应用了 html 样式，例如

Eating <span style="color:red;font-weight:bold;">65</span> <span style="color:blue;font-weight:bold;">28</span>

但样式未呈现。有没有办法做到这一点。下面是代码。

const data = {
  labels: [
    'Eating 65 / 28',
    'Drinking 59 / 48',
    'Sleeping 90 / 40',
    'Designing 81 / 19',
    'Coding 56 / 96',
    'Cycling 55 / 27',
    'Running 48 / 100'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};

Answer 1

您希望雷达图上的每个点标签以两种不同的颜色显示。您尝试使用 HTML 样式来完成此操作，但您注意到该样式并未应用。 Chart.js 库不支持直接 HTML 标签，因此您无法使用 span 等标签应用样式。相反，您需要使用 Chart.js 提供的选项和回调函数来开发自定义解决方案。