Angular中使用Highcharts实现折线/曲线两点间线段自定义颜色

可以实现，不需要依赖zones，以下是适配Angular开发场景的两种常用实现方式：

方案1：使用官方multi-color-line扩展模块（推荐） #

这是Highcharts官方推出的专门用于单条折线每段设置不同颜色的扩展，支持line、spline类型，性能更好，曲线衔接更自然：

• 第一步：Angular项目中直接通过npm安装对应扩展包
• 第二步：在业务组件中导入并注册模块：

import * as Highcharts from 'highcharts';
import MultiColorLine from 'highcharts/modules/multi-color-line';
MultiColorLine(Highcharts);

• 第三步：在series配置中给每个数据点加segmentColor属性，指定当前点到下一个点之间的线段颜色即可，示例配置：

series: [{
  type: 'line', // 也可设置为spline
  data: [
    {y: 10, segmentColor: '#ff0000'},
    {y: 20, segmentColor: '#00ff00'},
    {y: 15, segmentColor: '#0000ff'},
    {y: 25} // 最后一个点无需设置segmentColor
  ]
}]

方案2：原生配置拆分多系列模拟 #

无需引入额外扩展，纯原生Highcharts配置即可实现，适合不想引入额外依赖的场景：
将每一段相邻两个点单独拆分为一个独立的line/spline系列，每个系列单独设置color属性，同时关闭所有子系列的legend展示，单独保留一个统一的legend项即可，示例配置逻辑：

// 原始数据和对应每段颜色
const rawData = [10,20,15,25];
const segmentColors = ['#ff0000', '#00ff00', '#0000ff'];
// 动态生成系列
const series = segmentColors.map((color, index) => ({
  type: 'line',
  color: color,
  showInLegend: index === 0 ? true : false, // 仅第一个系列展示legend
  name: '自定义折线',
  data: [
    [index, rawData[index]],
    [index+1, rawData[index+1]]
  ]
}))

需求实现效果参考：

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