Question

在显示堆积区域图时，我得到了一个相当简单的问题（我猜）。

看看这张图：

我想要的是test1应该直接在2024结束。现在它已经消失了＃34;到2028年。与test2和test3相同：我想直接在2028年开始，而不是已经在2024年开始，并且＆＃34;在＃34;中消失。

有人知道这是否可行？我查看了API参考但找不到任何相关内容。

$(function () {
        var yAxisLabels = [0, 20000, 40000, 60000, 80000, 100000, 120000];
    var xCategories = ['2016', '2020', '2024', '2028', '2032', '2036', '2040'];

    $('#container').highcharts({
        chart: {
            type: 'area'            
        },
        xAxis: {            
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            },
            labels: {
                formatter: function() {
                    return xCategories[this.value];
                }
            },
            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0,
        },
        yAxis: {
                startOnTick: true,
            title: {
                enabled: false
            },
            tickPositioner: function() {
                return yAxisLabels;
            },
            labels: {
            formatter: function() {
                return "€ " + this.value;
                }
                }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1
            },
            series: {
                fillOpacity: 1
            }
        },
        series: [{
            name: 'test1',
            data: [113864, 113864, 113864, 0, 0, 0, 0],
            color: 'rgba(0,0,0,1)'
        }, {
            name: 'test2',
            data: [0, 0, 0, 87905, 87905, 87905, 87905]            
        }, {
            name: 'test3',
            data: [0, 0, 0, 14211, 14211, 14211, 14211]
        }]
    });
});

Answer 1

这是因为area1值为零，但它被放置在堆积区域的顶部，因此您将看到奇怪的形状。如果您将area1数据放在提供的数组中的最后一位，则area1的数据最后填充并显示在底部，看起来更好：

series: [{
    name: 'test2',
    data: [0, 0, 0, 87905, 87905, 87905, 87905]
}, {
    name: 'test3',
    data: [0, 0, 0, 14211, 14211, 14211, 14211]
},{
    name: 'test1',
    data: [113864, 113864, 113864, 0, 0, 0, 0],
    color: 'rgba(0,0,0,1)'
}]

Updated fiddle

Highcharts中的堆积区域使我的系列渐渐淡入淡出

1 个答案: