高图显示两个具有相同值的线系列

时间:2018-12-14 19:40:29

标签: highcharts series

我的系列可能具有相同的值区域。例如,下面的示例从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 :(得分:2)

第一个选项

您可以像这样对每个系列使用透明的颜色:

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 - Transparent colors

第二个选项

使用其他line width。第一个意甲将始终在后面,因此您可以将其放大并围绕第二个意甲:

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]
}],

Fiddle - Line width

第三个选项

使用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