将 plotbonds 添加到 Highcharts 中由 GapSize 定义的 Gaps

Question

我正在尝试将背景颜色添加到数据间隙中，以便在较大的间隔内更加明显，我知道我可以通过添加具有我想要的颜色的 plotbonds 来做到这一点，问题是我没有开始和差距的结束，因为它是通过定义 GapSize 和 GapUnit 创建的（没有包含空数据的日期，只是日期中的差距）。我尝试通过计算日期之间的差异并将其与 tickInterval 进行比较来添加 plotbonds，但到目前为止运气不好，

这里是一个用 gapsize

设置间隙的例子

 plotOptions: {
        series: {
            gapSize: 1
        }
    }

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/plotoptions/series-gapsize

有更简单的方法吗？

谢谢

Answer 1

Highcharts 在内部添加空点以创建间隙。您可以获得计算出的空点，并根据它们的值创建 plot-bands.

例如：

let plotBands = [];
let allowChartUpdate = true;

(function(H) {
    H.wrap(H.seriesTypes.area.prototype, 'getGraphPath', function(proceed, points) {
        const xAxis = this.xAxis;
        plotBands = [];

        points.forEach((p, index) => {
            if (p.isNull) {
                plotBands.push({
                    from: points[index - 1] ? points[index-1].x : xAxis.min,
                    to: points[index + 1] ? points[index+1].x : xAxis.max,
                    color: 'red'
                });
            }
        });

        return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

Highcharts.stockChart('container', {
    chart: {
        type: 'area',
        events: {
            render: function() {
                // prevent infinity loop
                if (allowChartUpdate) {
                    allowChartUpdate = false;
                    this.xAxis[0].update({plotBands});
                    allowChartUpdate = true;
                }
            }
        }
    },
    ...
});

现场演示： https://jsfiddle.net/BlackLabel/jz0n28om/

API参考：https://api.highcharts.com/highcharts/xAxis.plotBands

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

将 plotbonds 添加到 Highcharts 中由 GapSize 定义的 Gaps

Add plotbonds to Gaps defined by GapSize in Highcharts

javascript

highcharts