如何只为部分数据点添加标签？

Question

我正在尝试创建一个 chart.js 散点图，其中包含一组值为 0% 到 100% 的点。我想让 0 是一个红点，100 是一个蓝色点，并且在两者之间有一个渐变。我能够得到我想要的颜色，但是是否可以得到像 0、25、50、75 和 100 这样的几个点的标签？我不希望所有 101 个可能值的标签足以让用户理解它是一个频谱。

我考虑尝试将两个数据集添加到图表中，一个用于没有标签的真实数据，另一个没有数据但有我想要的五个标签。这行得通吗？

Answer 1

是的，您可以使用 afterBuildTicks 挂钩指定您想要的报价。您还可以在报价中指定 count 属性这将使 chart.js 生成那么多报价，但您无法控制这些报价的值：

const data = [];

for (let i = 0; i < 100; i++) {
  data.push({
    x: i,
    y: i
  })
}

const options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: data,
      borderColor: 'orange',
      backgroundColor: 'orange'
    }]
  },
  options: {
    scales: {
      x: {
        afterBuildTicks: (a) => (a.ticks = [{
          value: 0
        }, {
          value: 25
        }, {
          value: 50
        }, {
          value: 75
        }, {
          value: 100
        }]),
        ticks: {
          count: 5, // limit to 4 ticks but let chart.js decide what tose ticks are
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

如何只为部分数据点添加标签？

How to add labels for only some of the data point?

chart.js