Highcharts：如何根据自定义点的ps字段设置线条区域颜色

方案1：按ps字段拆分数据为多个系列 #

这是最直观易维护的方案，将原始数据按ps值分组，每个分组作为独立折线系列，分别配置对应颜色，同时补充衔接点保证折线连续。

实现步骤： #

• 遍历原始数据，按ps值分组
• 为每个分组创建系列，设置对应颜色
• 复制上一组的最后一个点作为当前组的起始点，避免折线断裂

示例代码：

// 原始数据
const rawData = [
     {x:Date.UTC(2022,9,25,00,10),y:23,ps:"HCE"},
     {x:Date.UTC(2022,9,25,00,20),y:24,ps:"HPE"},
     {x:Date.UTC(2022,9,25,00,30),y:23,ps:"HCH"},
     {x:Date.UTC(2022,9,25,00,40),y:24,ps:"HCH"}
];

// 按ps分组数据
const groupedData = {};
rawData.forEach(point => {
  if (!groupedData[point.ps]) groupedData[point.ps] = [];
  groupedData[point.ps].push(point);
});

// 生成系列数据，补充衔接点
const seriesData = [];
let prevLastPoint = null;
Object.keys(groupedData).forEach(ps => {
  const points = groupedData[ps];
  const adjustedPoints = [...points];
  // 复制上一组最后一个点，保证折线连续
  if (prevLastPoint) adjustedPoints.unshift({...prevLastPoint, ps});
  
  seriesData.push({
    data: adjustedPoints,
    color: ps === 'HCE' ? 'red' : ps === 'HPE' ? 'blue' : 'green',
    showInLegend: false // 不需要区分系列时隐藏图例
  });
  prevLastPoint = points[points.length - 1];
});

// 初始化图表
Highcharts.chart('container', {
  xAxis: { type: 'datetime' },
  series: seriesData
});

方案2：动态设置点与线段颜色（不拆分系列） #

如果不想拆分系列，可通过图表加载事件，动态修改每个点的填充色，同时遍历SVG线段元素设置对应颜色。

示例代码：

Highcharts.chart('container', {
  xAxis: { type: 'datetime' },
  series: [{
    data: rawData,
    color: 'transparent', // 禁用默认系列颜色
    pointAttributes: {
      // 动态设置点的填充色
      fill: point => {
        switch(point.ps) {
          case 'HCE': return 'red';
          case 'HPE': return 'blue';
          case 'HCH': return 'green';
          default: return 'gray';
        }
      }
    },
    events: {
      load: function() {
        const series = this;
        // 遍历线段，设置相邻点间的线段颜色（取后一个点的ps对应颜色）
        series.lines.forEach((line, index) => {
          const nextPoint = series.points[index + 1];
          if (nextPoint) {
            let color;
            switch(nextPoint.ps) {
              case 'HCE': color = 'red'; break;
              case 'HPE': color = 'blue'; break;
              case 'HCH': color = 'green'; break;
              default: color = 'gray';
            }
            line.attr({ stroke: color });
          }
        });
      }
    }
  }]
});

方案对比： #

• 方案1逻辑简单，兼容性好，适合大多数场景
• 方案2无需拆分系列，但需操作SVG元素，对Highcharts版本有一定要求

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