时间戳

首页 > 解决方案 > 更改曲线上方的背景颜色

highcharts - 更改曲线上方的背景颜色

问题描述

我正在使用 Highcharts，我想知道是否有办法改变特定曲线上方的背景颜色？我可以在曲线下方做，但我没有找到在上面做的方法。

你能帮我解决这个问题吗？

谢谢你的帮助，最好的，

标签： highchartsbackground-color

解决方案

更新方式更简单：

plotOptions: {
    areaspline: {
        fillOpacity: 0.5,
        threshold: 15 // your y-axis max goes here
    }
},

示例：https ://jsfiddle.net/mzhukovs/8aqbp3xm/2/

但这仅适用于您想覆盖所有点，否则您将在下面使用平滑线（即样条线）而不是使用平滑线。

使用范围系列类型并将数据设置为等于注释中所述，基本上对于每个 x 轴值，范围从您的实际 y 值到 y 轴上的最大值（您可以设置通过 y 轴属性，因此您每次都知道它或使用 js 动态获取它）。

例如

   series: [{
        name: 'John',
        data: [3, 4, 3, 5, 4, 10, 12]
    }, {
        name: 'Jane',
        data: [1, 3, 4, 3, 3, 5, 4]
    },
    {
        name: 'John Range Example',
        data: [
        [4, 4, 15], // index 0: x-category, 1: equal to point, 2: equal to y-axis max (which you should identify or set yourself explicitly so always known)
        [5, 10, 15],
        [6, 12, 15]],
        type: 'arearange',
        lineWidth: 0,
        //linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
}

这是一个小提琴，我只为其中一行的一部分做了： https ://jsfiddle.net/mzhukovs/8aqbp3xm/

如果您根本不想要这个阴影区域的任何交互性，那么您将不得不禁用标记和悬停操作，应该不难。希望这可以帮助！

推荐阅读