Question

我正在制作一个应用程序，将在龙卷风图表中显示案例研究的结果。在龙卷风图表中，我想在所有负面结果（以红色显示）的顶部显示所有正面结果（以绿色显示），而不是在同一水平上显示负面和正面结果。这是我的jsfiddle example。我通过highcharts documentation想出我可以通过这样做来改变颜色：

Highcharts.setOptions({
 colors: ['#FF0000', '#00FF00']
});

我无法找到关于如何在X顶部显示Y轴的任何内容。

EDITED 这是我想要完成的一个例子

enter image description here

Answer 1

您可以尝试在负坐标中指定x，例如：

data: [[-21,-1746181], [-20,-1884428],[-19,-2089758], [-18,-2222362], [-17,-2537431], [-16,-2507081], [-15,-2443179],
    [-14,-2664537], [-13,-3556505], [-12,-3680231], [-11,-3143062], [-10,-2721122], [-9,-2229181], [-8,-2227768],
    [-7,-2176300], [-6,-1329968], [-5,-836804], [-4,-354784], [-3,-90569], [-2,-28367], [-1,-3878] ]

演示Fiddle

Answer 2

您可以设置包含某些标识符的重复类别，也可以为不使用它们的系列添加空null点，或者添加[x,y]点以显示它应该转到哪个类别索引。然后，您需要修改标签以删除标识符。新类别：

categories = ['0-4', '5-9', '10-14', '15-19',
    '20-24', '25-29', '30-34', '35-39', '40-44',
    '45-49', '50-54', '55-59', '60-64', '65-69',
    '70-74', '75-79', '80-84', '85-89', '90-94',
    '95-99', '100 +',
    'a0-4', 'a5-9', 'a10-14', 'a15-19',
    'a20-24', 'a25-29', 'a30-34', 'a35-39', 'a40-44',
    'a45-49', 'a50-54', 'a55-59', 'a60-64', 'a65-69',
    'a70-74', 'a75-79', 'a80-84', 'a85-89', 'a90-94',
    'a95-99', 'a100 +'];

新数据系列：

    series: [{
        name: 'Male',
        data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768, -2176300, -1329968, -836804, -354784, -90569, -28367, -3878,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null]
    }, {
        name: 'Female',
        data: [null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
        3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
        1447162, 1005011, 330870, 130632, 21208]
    }]

新xAxis.label.formatter（xAxis都需要）：

            formatter: function () {
                var text = this.value;
                if (text.charAt(0) == "a") {
                    return text.substring(1);;
                } else {
                    return text;
                }
            }

tooltip：

需要类似的内容

    tooltip: {
        formatter: function () {
            var text = this.point.category;
                if (text.charAt(0) == "a") {
                    text = text.substring(1);;
                } else {
                    text = text;
                }
            return '<b>' + this.series.name + ', age ' + text + '</b><br/>' +
                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    }

直播demo。

如何在X顶部显示Y轴？

2 个答案: