HighChart中的图表背景突出显示 [英] Chart background highlight in HighChart

问题描述

在​​此问题中，说明了如何将背景设置为具有两种颜色(斑马之类的.我需要通过相应设置背景色在图表中突出显示时间变化，例如:

In this question it's explained how to set the background to have two colours (zebra like). My need is to highlight in the chart temporal changes via setting accordingly the background colour, like this:

两个蓝色区域可以标识发生某事的时间段，而白色区域则用于不发生事件的时间段.在此之上，我将添加线和其他图表.

the two blue area may identify periods where something was happening and the white one when it wasn't. On top of this I'll then add lines and other charts.

是否可以通过将要突出显示的期间的开始日期和结束日期传递给Highchart来完成此操作? (也许是面积图的解决方法?)

Can this be done via passing Highchart with start and end date of periods to be highlighted? (an area chart workaround maybe?)

推荐答案

您最可能需要的是 plotBands

What you most likely need is plotBands

xAxis.plotBands

一条横跨绘图区域的彩色条带，标出了一个间隔 轴.

xAxis.plotBands

A colored band stretching across the plot area marking an interval on the axis.

在量规中，Y轴(值轴)上的绘图带将沿着 量规的准分子.

In a gauge, a plot band on the Y axis (value axis) will stretch along the perimiter of the gauge.

plotBands可以添加到两个轴中的任何一个上，在您的情况下，您似乎希望在xAxis上添加它，以下是一种方法

plotBands can be added on either of the axes, in your case you seem to want it on the xAxis, following is how one could do it

xAxis: {
    plotBands: [{ 
        color: '#FCFFC5',
        from: Date.UTC(2010, 0, 2),
        to: Date.UTC(2010, 0, 4)
    }]     
}

地带@ jsFiddle

这篇关于HighChart中的图表背景突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！