Высокие диаграммы показывают две серии линий с одинаковыми значениями - PullRequest
Новая
       17

Высокие диаграммы показывают две серии линий с одинаковыми значениями

0 голосов
/ 14 декабря 2018

У меня есть серии, которые могут иметь одинаковые значения области.Например, со 2 по 7 в следующем примере: 

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});
});

Highcharts показывает только одну из линий, другая строка просто залегает на первую.Каков наилучший подход, чтобы показать такую ​​ситуацию.Я пытался найти вариант, который позволил бы их вытягивать друг к другу, как стек друг на друга, но стек - это другой график.Каков лучший выбор, чтобы все еще представить это?

1 Ответ

0 голосов
/ 16 декабря 2018

1-й вариант

Вы можете использовать прозрачные цвета для каждой серии, например: 

series: [
    {
        color:'rgba(255,0,0,.5)',
        data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
    }, {
        color:'rgba(0,0,255,.5)',
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }
]

Fiddle - прозрачные цвета

2-й вариант

Использовать различную ширину линии .Первая серия всегда будет сзади, поэтому вы можете увеличить ее, и она будет окружать вторую серию: 

series: [{
    lineWidth:6,
    marker:{
        radius : 7
    },
    data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}],

Скрипка - Ширина линии

3-й вариант

Использование dashStyle API Doc : 

series: [{
    data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
}, {
    dashStyle: 'dot',
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}],

Fiddle - dashStyle

...