javascript - Highcharts:在一行中途更改行选项

Question

我正在寻找一种方法来更改 Highcharts 中一段线的外观。我在同一系列中有具体数据和预测数据。我需要在视觉上区分显示预测数据的部分。

我发现我可以关闭预测数据点的标记。这似乎有点太微妙了。我想要更突出的东西。

我考虑过为标记符号使用自定义图形。我不认为这会清楚地表明数据是推测的。虚线或浅色线(部分透明)可以更好地传达情况。

在下面的示例代码中，最后三个点是预测数据。我希望它们之间的线(从 9 月到 12 月)看起来与前九个点之间的线不同。 JS Fiddle here.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
                {
                    y: 194.1,
                    color: '#BF0B23',
                    marker: {enabled: false}
                },
                {
                    y: 95.6,
                    color: '#BF0B23',
                    marker: {enabled: false}
                },
                {
                    y: 54.4,
                    color: '#BF0B23',
                    marker: {enabled: false}
                }]
        }]
    });
});

如何更改一段绘图线的颜色/透明度？

如何更改一段绘图线的 dashStyle？

Answer 1

这个 fiddle 回答了这个问题:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/color-zones-dashstyle-dot

Highcharts.chart('container', {
title: {
    text: 'Zone with dash style'
},
subtitle: {
    text: 'Dotted line typically signifies prognosis'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    zoneAxis: 'x',
    zones: [{
        value: 8
    }, {
        dashStyle: 'dot'
    }]
}]

});