如何在Chart.js中根据数值自定义数据点颜色？

要实现根据y值区间自定义数据点颜色，你可以利用Chart.js数据集的pointBackgroundColor属性，通过遍历数据并根据条件返回对应颜色即可。以下是修改后的完整代码：

const ctx = document.getElementById('chart');
const request = [
  {x: 'Station1',y: 5},
  {x: 'Station2',y: 2},
  {x: 'Station3',y: 1},
  {x: 'Station4',y: 8},
  {x: 'Station5',y: 7},
  {x: 'Station6',y: -2},
  {x: 'Station7',y: 10},
  {x: 'Station8',y: 0}
]

const labels = request.map(function(e) {return e.x;});

const fuelChart = new Chart(ctx,{
  type:'scatter',
  data: {
    datasets: [{
      data: request,
      label:'Day to posts',
      // 根据y值区间设置数据点颜色
      pointBackgroundColor: request.map(item => {
        if (item.y <= 0) {
          return 'red';
        } else if (item.y > 0 && item.y <= 4) {
          return 'blue';
        } else if (item.y > 4 && item.y <= 8) {
          return 'green';
        } else {
          // 处理y>8的情况，可根据需求调整颜色
          return 'orange';
        }
      })
    }]
  },
  options: {
    responsive: true,
    scales:{
      x:{
        type:'category',
        labels:labels,

      }
    }
  }
})

关键说明 #

• pointBackgroundColor接收一个颜色数组，数组中每个元素对应一个数据点的颜色
• 通过request.map遍历每个数据项，根据item.y的数值区间返回对应的颜色值（支持颜色名称、十六进制、RGB等格式）
• 你可以根据实际需求修改区间条件和对应的颜色值

内容的提问来源于stack exchange，提问作者user17290362