Highchart：依据pts列修改Promoter(%)折线颜色（不显示pts折线）

核心思路 #

把原始数据按pts<43的条件拆成两组，分别对应「正常状态」和「需高亮」的Promoter(%)数值，在图表里创建两个同类型的spline系列，分别设置不同颜色，叠加后就能实现指定条件下的折线变色效果，同时完全不配置pts系列来隐藏它。

具体步骤 #

• 数据预处理：遍历原始数据，将每个week对应的%值按pts是否小于43拆进两个数组，对应位置用null填充缺失值，保证两个系列的x轴索引完全匹配。
• 图表配置：
  • 只配置两个Promoter(%)相关的spline系列，分别设置不同颜色（比如pts<43时用红色，其余用蓝色）。
  • 关闭不必要的图例，避免显示重复的系列标识。
  • 把x轴绑定week字段，确保数据对应关系准确。

代码示例 #

// 原始数据
const rawData = [
  { week: 1, percent: 34, pts: 37 },
  { week: 2, percent: 44, pts: 21 },
  { week: 3, percent: 41, pts: 67 },
  { week: 4, percent: 59, pts: 135 },
  { week: 5, percent: 49, pts: 102 },
  { week: 6, percent: 57, pts: 11 },
  { week: 7, percent: 60, pts: 4 },
  { week: 8, percent: 47, pts: 53 }
];

// 拆分数据：分为pts≥43和pts<43的两组
const normalData = [];
const highlightData = [];
rawData.forEach(item => {
  normalData.push(item.pts >= 43 ? item.percent : null);
  highlightData.push(item.pts < 43 ? item.percent : null);
});

// 初始化图表
Highcharts.chart('container', {
  xAxis: {
    categories: rawData.map(item => item.week),
    title: { text: 'Week' }
  },
  yAxis: {
    title: { text: 'Promoter(%)' }
  },
  legend: { enabled: false }, // 关闭图例，避免显示两个系列
  series: [
    {
      name: 'Promoter(%)',
      type: 'spline',
      data: normalData,
      color: '#2f7ed8' // 默认颜色
    },
    {
      name: 'Promoter(%) - Low PTS',
      type: 'spline',
      data: highlightData,
      color: '#ff0000' // pts<43时的高亮颜色
    }
  ]
});

补充说明 #

• 两个spline系列会自动衔接，因为缺失值用null填充，图表会跳过null值并连接有效点，视觉上就是一条折线但不同段颜色不同。
• 如果需要保留图例且只显示一个条目，可以把两个系列的name设为相同，或者自定义图例逻辑。

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