蝴蝶图使用Highcharts [英] Butterfly Chart using Highcharts

问题描述

我试图用Highcharts创建一个蝴蝶图。我想将它绘制为

代码如下

  //从http://populationpyramid.net/germany/2015/ 
 $收集的数据（函数（）{
 //年龄类别
 var 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 +']; 
 $（document）.ready（function（）{
 Highcharts.chart（'container'，{
 chart：{
 type：'bar'
}，
标题：{
 text：'2015年德国人口金字塔'
}，
副标题：{
 text： '资料来源：< a href =http://populationpyramid.net/germany/2015/> 1950年至2100年世界人口金字塔'
}，
 xAxis： [{
类别：类别，
反转：false，
标签：{
 step：1 
} 
}，/ * {//镜像轴在右侧
相反：true，
颠倒：false，
类别：类别，
 linkedTo：0，
标签：{
 step：1 $ 
标题：{
 text：null 
}，
标签：{
 $ b} * /]，
 yAxis： b格式化程序：function（）{
 return Math.abs（this.value）+'％'; 
} 
} 
}，
 
 plotOptions：{
系列：{
堆栈：'正常'
} 
 $，
 
 tooltip：{
 formatter：function（）{
 return'< b>'+ this.series.name +'，age'+ this。 point.category +'< / b>< br />'+ 
'人口：'+ Highcharts.numberFormat（Math.abs（this.point.y），0）; 
} 
}，
 
系列：[{
名称：'男'，
数据：[-2.2，-2.2，-2.3， - 2.5，-2.7，-3.1，-3.2，
 -3.0，-3.2，-4.3，-4.4，-3.6，-3.1，-2.4，
 -2.5，-2.3，-1.2， - 0.6，-0.2，-0.0，-0.0] 
}，{
名称：'女'，
数据：[2.1,2.0,2.2,2.4,2.6,3.0,3.1,2.9 ，
 3.1，4.1，4.3，3.6，3.4，2.6，2.9，2.9，
 1.8，1.2，0.6，0.1，0.0] 
}] 
}）; 
}）; 
 
}）; 
  

这是我的小提琴

I'm trying to create a butterfly chart using Highcharts. I want to plot it as

The Code is as follows

// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
// Age categories
var 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 + '];
$(document).ready(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Population pyramid for Germany, 2015'
        },
        subtitle: {
            text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
        },
        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, /*{ // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }*/],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return Math.abs(this.value) + '%';
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
        }, {
            name: 'Female',
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                1.8, 1.2, 0.6, 0.1, 0.0]
        }]
    });
});

});

Here is my fiddle link, how can I get my xAxis labels in between the series. Please guide me to achieve this.

解决方案

I would approach this differently than morgan did, though that example is certainly useful.

I would do this as a standard bar chart, making use of multiple yAxis objects (one for each series), which also allows for using the reversed property of the left-facing series.

Code Example:

    yAxis: [{
        title: { text: null },
        width: 200,
        reversed: true
    },{
        offset: 0,
        title: { text: null },
        left: 300,
        width: 200
    }],
    series: [{
      yAxis: 0,
      data: [...]
    }, {
      yAxis: 1,
      data: [...]
    }]

Fiddle:

• http://jsfiddle.net/jlbriggs/L80cdxm0/

Example Output:

这篇关于蝴蝶图使用Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！