高图:在一行中途更改行选项 [英] Highcharts: change line options mid-way through a line

问题描述

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

I'm looking for a way to change the appearance of a segment of a line in Highcharts. I have concrete data and forecast data within the same series. I need to visually differentiate the part of the line that shows the forecast data.

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

I have found that I can turn off the marker for the forecast data points. This seems a little too subtle. I'd like something that stands out better.

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

I have considered using a custom graphic for the marker symbol. I don't think that would give a clear indication that the data is conjecture. A dashed line or a lighter color line (partial transparency) would better communicate the situation.

在下面的示例代码中，最后三点是预​​测数据.我希望它们之间的线(从9月到12月)看起来不同于前9个点之间的线. JS提琴在这里.

In the sample code below, the last three points are forecast data. I would like the line between them (from Sep to Dec) to look different than the line between the first nine points. 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}
                }]
        }]
    });
});

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

How can I change the color/transparency of one segment of the plot line?

如何更改绘图线某一段的dashStyle?

How can I change the dashStyle for one segment of the plot line?

推荐答案

这个小提琴回答了这个问题:

This fiddle answers this: 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'
    }]
}]

})；

这篇关于高图:在一行中途更改行选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！