Highcharts 设置不同颜色背景

原创于 2022-09-06 16:59:39 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

HighCharts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在图表中通过xAxis的plotBands属性设置不同时间段的背景颜色，例如将0~6点设为谷时，6~8点设为平时。通过动态配置from和to值，可以灵活适应各种时间段的划分，实现个性化图表展示。

有一个需求，需要设置不同时间段内的图表背景，如图所示：
在这里插入图片描述
经过一翻摸索，得以解决。
在xAxis中的属性plotBands中设置：

plotBands:[{
          // 0~6点
          from: 1, // 起始，有时可能需要动态生成，这需要根据产品而定
          to: 3, // 结束
          color: '#003377',
          label: {
            text: '谷时',
            style: {
              color: '#FFFFFF',
            },
          },
        },
        {
          // 6~8点
          from: 3, // 起始
          to: 4, // 结束
          //color: '#DDDDDD',
          label: {
            text: '平时',
            style: {
              color: '#FFFFFF',
            },
          },
        },
        ...
]