javascript - HighChart 中的图表背景突出显示

标签 javascript jquery highcharts

this question它解释了如何将背景设置为两种颜色(如斑马线)。我的需要是通过相应设置背景颜色来突出显示图表中的时间变化,如下所示:

enter image description here

两个蓝色区域可以标识某件事正在发生的时期,而白色区域则可以标识没有发生的事情。除此之外,我将添加线条和其他图表。

这可以通过传递 Highchart 并突出显示期间的开始日期和结束日期来完成吗? (也许可以使用面积图解决方法?)

最佳答案

您最可能需要的是 plotBands

xAxis.plotBands

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

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

plotBands 可以添加到任一轴上,在您的情况下,您似乎希望将其添加到 xAxis 上,以下是如何做到这一点

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

Plotbands @ jsFiddle

关于javascript - HighChart 中的图表背景突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19186249/

相关文章:

javascript - 使用嵌入的表单集合保存相关 Doctrine 实体时出现 Symfony SQL 错误

c# - ASP.Net Core 文件上传进度 session

php - 尝试使用 PHP 从 MySQL 数据库获取数据时,HighCharts 饼图 X 轴值不显示

javascript - 如何将 HighCharts 图像保存到 PHP 的项目文件夹中?

javascript - 从数字文字访问 "getter"的属性时,IE9 中出现奇怪的 `Number.prototype` 行为

javascript onClick=funct(this) 使用 addEventListener 替换

javascript - 将包含一个元素的 jQuery 对象称为节点在语义上是否不正确?

javascript - Highcharts X 轴类别

javascript - 搜索引擎索引如何为 JavaScript Web 应用程序(如 REACT)工作?

javascript - 如何在 javascript chrome 书签代码中使用 jQuery?