Question

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

我发现我可以关闭预测数据点的标记。这似乎有点过于微妙。我想要更好的东西。

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

在下面的示例代码中，最后三个点是预测数据。我希望它们之间的线（从9月到12月）看起来与前9点之间的线不同。 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

这个小提琴回答了这个问题：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'
    }]
}]

}）;

Answer 2

所以官方的说法是我需要将系列分为实际和预测。这是我正在使用的配置，以防任何人感兴趣。

$(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]
        }, {
            showInLegend: false,
            name: 'Series 1',
            color: 'rgba(90,155,212,0.5)',
            dashStyle: 'Dash',
            pointStart: 8,
            zIndex: -100,
            linkedTo: ':previous',
            marker: {
                enabled: false
            },
            data: [216.4, 194.1, 95.6, 54.4]
        }]
    });
});

请注意，预测中的第一个点与实际值中的最后一个点相同。这使线条连续。

在选项中，'name'与原始系列的名称相同，以便工具提示正确显示，'color'与原始系列相同，透明度为50％，'pointStart'是起始点的索引（类别名称在这里不起作用），'zIndex'收起前一行标记下的第一个点，'linkedTo'使隐藏实际值时预测消失（通过点击图例中的名称）。

Answer 3

如果你需要有虚线或其他颜色或部分系列，你需要为每种风格/颜色设置serpated系列。

Highcharts：在线路中间更改线路选项

3 个答案: