Question

我无法让Highcharts在图表的图例中显示我的区域范围系列。我在这里有一个jsFiddle：http://jsfiddle.net/0eaj4ceu/显示了这个问题。它仅显示图例中的单行，而未显示区域范围系列。有什么想法吗？

以下代码：

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JS：

$(document).ready(function () {
initChart();
});

function initChart() {

var wide_ranges = [
    [2014, 55488, 55503],
    [2015, 55857, 55981],
    [2016, 56142, 56325],
    [2017, 56272, 56514],
    [2018, 56319, 56654],
    [2019, 56235, 56669],
    [2020, 56042, 56610],
    [2021, 55745, 56349],
    [2022, 55469, 56168],
    [2023, 55088, 55794],
    [2024, 54746, 55453],
    [2025, 54197, 55140],
    [2026, 53844, 54727],
    [2027, 53305, 54351],
    [2028, 52839, 53921],
    [2029, 52322, 53387],
    [2030, 51568, 52991],
    [2031, 50944, 52391],
    [2032, 50152, 51907],
    [2033, 49466, 51528],
    [2034, 48756, 51133]
],
    medium_ranges = [
        [2014, 55491, 55499],
        [2015, 55886, 55954],
        [2016, 56185, 56275],
        [2017, 56328, 56448],
        [2018, 56390, 56548],
        [2019, 56368, 56574],
        [2020, 56223, 56473],
        [2021, 55968, 56248],
        [2022, 55614, 55962],
        [2023, 55281, 55689],
        [2024, 54868, 55303],
        [2025, 54487, 54987],
        [2026, 54040, 54566],
        [2027, 53519, 54131],
        [2028, 53012, 53742],
        [2029, 52466, 53175],
        [2030, 51884, 52762],
        [2031, 51274, 52117],
        [2032, 50601, 51560],
        [2033, 49898, 50952],
        [2034, 49143, 50377]
    ],
    narrow_ranges = [
        [2014, 55493, 55495],
        [2015, 55911, 55934],
        [2016, 56209, 56246],
        [2017, 56371, 56410],
        [2018, 56445, 56500],
        [2019, 56435, 56488],
        [2020, 56304, 56367],
        [2021, 56055, 56143],
        [2022, 55726, 55838],
        [2023, 55395, 55507],
        [2024, 55033, 55141],
        [2025, 54633, 54796],
        [2026, 54195, 54409],
        [2027, 53783, 53960],
        [2028, 53264, 53452],
        [2029, 52764, 53000],
        [2030, 52146, 52420],
        [2031, 51550, 51849],
        [2032, 50952, 51245],
        [2033, 50249, 50645],
        [2034, 49601, 50067]
    ],
    projection = [
        [2014, 55493],
        [2015, 56074],
        [2016, 56556],
        [2017, 56806],
        [2018, 56943],
        [2019, 56961],
        [2020, 56887],
        [2021, 56743],
        [2022, 56571],
        [2023, 56414],
        [2024, 56275],
        [2025, 56082],
        [2026, 55881],
        [2027, 55627],
        [2028, 55459],
        [2029, 55217],
        [2030, 54969],
        [2031, 54638],
        [2032, 54350],
        [2033, 53994],
        [2034, 53566]
    ];


$('#container').highcharts({
    title: {
        text: " "
    },
    xAxis: {
        title: {
            text: "Years"
        }
    },
    yAxis: {
        title: {
            text: "Inventory"
        },
        min: 46071-1000,
        max: 58098-1000
    },
    tooltip: {
        crosshairs: true,
        shared: true,
        valueSuffix: ' Inventory'
    },
    legend: {
        title: {
            text: 'Probabilities'
        }
    },
    series: [{
        name: 'Inventory',
        data: projection,
        zIndex: 3,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: '#009933'
        }
    }, {
        name: '25% probability',
        data: medium_ranges,
        type: 'arearange',
        lineWidth: 1,
        linkedTo: ':previous',
        color: '#5DA5DA',
        fillOpacity: 0.8,
        zIndex: 1
    }, {
        name: '10% probability',
        data: wide_ranges,
        type: 'arearange',
        lineWidth: 1,
        linkedTo: ':previous',
        color: '#F15854',
        fillOpacity: 0.8,
        zIndex: 0
    }, {
        name: '30% probability',
        data: narrow_ranges,
        type: 'arearange',
        lineWidth: 1,
        linkedTo: ':previous',
        color: '#60BD68',
        fillOpacity: 0.8,
        zIndex: 2
    }]
});
}

Answer 1

原因是你正在使用“linkedTo：因为只有一个图例可见。根据highcharts API：

当链接两个系列时，只有第一个系列出现在图例中。切换其可见性也会切换链接系列。

See your updated fiddle here

 // linkedTo: ':previous',

评论linkedTo显示所有传说。

Highcharts不显示Legend中的AreaRange

1 个答案: