ng2-charts折线图如何高亮数值超出指定范围的数据点

实现逻辑 #

ng2-charts基于Chart.js封装，要实现不同范围数值的点自定义高亮，不需要依赖坐标轴配置，直接在数据集里为每个数据点单独配置点样式即可，匹配阈值设置对应颜色和大小：

• 血糖值 < 120：橙色圆点，放大半径实现高亮
• 血糖值 > 180：红色圆点，放大半径实现高亮
• 120 ≤ 血糖值 ≤ 180：默认样式圆点，常规大小

代码实现 #

重构数据集配置 #

把原来纯数字格式的data数组，遍历转换为带点样式配置的对象格式：

// 原始血糖监测数据
const rawSugarData = [70,180,120,90,110,240,550,40];

public lineChartData = {
  datasets: [{
    label: 'Blood Sugar',
    fill: false,
    borderColor: '#36A2EB', // 折线默认蓝色
    data: rawSugarData.map(value => {
      // 正常范围默认点配置
      const basePoint = {
        y: value,
        pointBackgroundColor: '#36A2EB',
        pointRadius: 3,
        pointHoverRadius: 5
      }
      // 低于120 橙色高亮
      if (value < 120) {
        basePoint.pointBackgroundColor = '#FF9800';
        basePoint.pointRadius = 6;
      }
      // 高于180 红色高亮
      if (value > 180) {
        basePoint.pointBackgroundColor = '#F44336';
        basePoint.pointRadius = 6;
      }
      return basePoint;
    })
  }],
  labels: ["low","high","normal","low","normal","high","high", "low"]
};

修正坐标轴配置 #

之前用的yAxes数组写法是Chart.js 2.x版本的语法，如果是3.x及以上版本需要调整为新写法，避免配置失效：

public lineChartOptions = {
  responsive: true,
  scales: {
    // 3.x+版本y轴配置
    y: {
      display: false,
      beginAtZero: true,
      ticks: {
        stepSize: 10
      }
    }
    // 如果是2.x版本，替换为下面的写法即可
    // yAxes: [{
    //   display: false,
    //   ticks: {
    //     beginAtZero: true,
    //     stepSize: 10
    //   }
    // }]
  }
};

注意事项 #

• 点的半径、色值可以根据实际UI需求调整，只要保证异常值点的尺寸大于正常值，就能达到明确的高亮区分效果
• 该写法是Chart.js原生支持的配置方式，不需要引入额外插件，兼容所有ng2-charts版本

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