highcharts - Highcharts 显示两个具有相同值的线系列

Question

我有可能具有相同值区域的系列。例如从 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 只显示其中一条线，另一条线是简单的先覆盖。显示这种情况的最佳方法是什么。我试图找到一个选项，让它们像堆栈一样背靠背地绘制，但堆栈是不同的图表。仍然呈现它的最佳选择是什么？

标签： highchartsseries

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

小提琴 - 透明颜色

第二个选项

使用不同的线宽。第一个系列将始终在后面，因此您可以将其放大并围绕第二个系列：

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

小提琴 - 线宽

第三个选项

使用dashStyle API 文档：

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

小提琴 - dashStyle