Highcharts 设置不同颜色背景

九持

于 2022-09-06 16:59:39 发布

阅读量1.2k

点赞数

分类专栏： HighCharts 文章标签： echarts

本文链接：https://blog.csdn.net/yqw666/article/details/126728703

版权

HighCharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有一个需求，需要设置不同时间段内的图表背景，如图所示：
在这里插入图片描述
经过一翻摸索，得以解决。
在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',
            },
          },
        },
        ...
]