如何在Angular 12中实现带底部色带的Highcharts折线图

要实现图中底部带有绿、黄、红三色区域的折线图，有两种简单的实现方式，以下是具体方案：

方案一：使用Y轴区间带（plotBands） #

这种方式是给Y轴添加背景色区间，配置简单，适合作为整个图表的背景提示区域：

修改你的chartOptions中的yAxis配置，添加plotBands数组定义三色区间：

chartOptions = {
  chart: {
    zoomType: 'x'
  },
  title: {
    text: 'test',
    align: 'left'
  },
  credits: {
    enabled: false,
  },
  legend: {
    enabled: false,
  },
  xAxis: {
    showEmpty: true,
    ignoreHiddenSeries: false,
    crosshair: {
      width: 3,
      snap: true,
      color: 'gray'
    },
  },
  yAxis: {
    showEmpty: true,
    ignoreHiddenSeries: false,
    title: {
      text: null,
    },
    // 添加三色区间带
    plotBands: [
      {
        from: 0,
        to: 2,
        color: 'rgba(76, 175, 80, 0.2)', // 绿色半透明
        label: { text: '正常', style: { color: '#2e7d32' } } // 可选标签
      },
      {
        from: 2,
        to: 5,
        color: 'rgba(255, 193, 7, 0.2)', // 黄色半透明
        label: { text: '警告', style: { color: '#f57f17' } }
      },
      {
        from: 5,
        to: 10, // 匹配你的数据最大值（当前数据最大为9）
        color: 'rgba(244, 67, 54, 0.2)', // 红色半透明
        label: { text: '危险', style: { color: '#c62828' } }
      }
    ]
  },
  tooltip: {
    shared: true,
    followPointer: true,
    style: {
      fontSize: '12px',
    },
  },
  series: [
    {
      data: [1, 2, 3, 4,  2, 3, 4, 3, 4, 3, 6,7,1, 9,2,1, 3,4, 5,2, 1, 7, 9, 2, 1, 3, 3,4, 1,3,4,6,1,2,4,5,6,3,2,5,2,6,7,8,8,1,2,3,3,2,1,1,6,8,9,2,1,2,4,6,3,6,7,8,1,4,6,7,8,3,5,5,6,2,1,2,1,1,1,1],
      name: 'line chart',
      type: 'line',
      fillOpacity: 0.3,
      zIndex: 1 // 确保折线在区间带上方
    },
  ],
};

方案二：使用区域图（Area Series） #

如果需要三色区域是独立的填充块（而非背景），可以添加三个area类型的系列，放在折线图下方：

chartOptions = {
  chart: {
    zoomType: 'x'
  },
  title: {
    text: 'test',
    align: 'left'
  },
  credits: {
    enabled: false,
  },
  legend: {
    enabled: false,
  },
  xAxis: {
    showEmpty: true,
    ignoreHiddenSeries: false,
    crosshair: {
      width: 3,
      snap: true,
      color: 'gray'
    },
  },
  yAxis: {
    showEmpty: true,
    ignoreHiddenSeries: false,
    title: {
      text: null,
    },
  },
  tooltip: {
    shared: true,
    followPointer: true,
    style: {
      fontSize: '12px',
    },
  },
  series: [
    // 红色区域（最底层）
    {
      type: 'area',
      data: Array(79).fill(10), // 数据长度和折线图一致（当前折线有79个数据点）
      color: 'rgba(244, 67, 54, 0.2)',
      fillOpacity: 0.3,
      enableMouseTracking: false, // 禁用鼠标交互，不干扰折线图
      zIndex: 0
    },
    // 黄色区域
    {
      type: 'area',
      data: Array(79).fill(5),
      color: 'rgba(255, 193, 7, 0.2)',
      fillOpacity: 0.3,
      enableMouseTracking: false,
      zIndex: 1
    },
    // 绿色区域
    {
      type: 'area',
      data: Array(79).fill(2),
      color: 'rgba(76, 175, 80, 0.2)',
      fillOpacity: 0.3,
      enableMouseTracking: false,
      zIndex: 2
    },
    // 原有折线图（最上层）
    {
      data: [1, 2, 3, 4,  2, 3, 4, 3, 4, 3, 6,7,1, 9,2,1, 3,4, 5,2, 1, 7, 9, 2, 1, 3, 3,4, 1,3,4,6,1,2,4,5,6,3,2,5,2,6,7,8,8,1,2,3,3,2,1,1,6,8,9,2,1,2,4,6,3,6,7,8,1,4,6,7,8,3,5,5,6,2,1,2,1,1,1,1],
      name: 'line chart',
      type: 'line',
      fillOpacity: 0.3,
      zIndex: 3
    },
  ],
};

注意事项 #

• 两种方案都可以根据你的实际需求调整颜色、区间范围（from/to或填充高度）
• 如果使用区域图方案，要确保data数组的长度和折线图一致，否则会出现错位
• 通过zIndex控制图层顺序，保证折线图在最上层

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