Highcharts如何绘制双轴负堆叠条？答案

【问题标题】：Highcharts how to draw dual axis negative stack bar?Highcharts如何绘制双轴负堆叠条？
【发布时间】：2017-09-25 20:51:11
【问题描述】：

我浏览了整个互联网，似乎找不到像这样的高图：

Highcharts 有一个示例 (https://www.highcharts.com/demo/bar-negative-stack)，但我似乎无法移动一组条形图，因此有空间在两个系列之间添加标签。有什么建议吗？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

在操作width 坐标轴时，可以使用百分比。看看下面的例子。

API 参考：
http://api.highcharts.com/highcharts/xAxis.categories
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding

示例：
http://jsfiddle.net/vkzzbvgw/

【讨论】：

这太完美了！

【解决方案2】：

设法得到一个粗略的版本：

http://jsfiddle.net/willycheung/xqw1x012/4/

var categories = ['<strong>Michael Bachman</strong><br>90% ($2.42M)', '<strong>Neil Anderson</strong><br>85% ($2.15M, <span style="color:orange">$750k</span>)', '<strong>Kelvin Luis</strong><br>63% ($1.5M)', '<strong>Steven Yellen</strong><br>62% ($1.2M, <span style="color:orange">$45k</span>)', '<strong>Richard Wally</strong><br>60% ($952K)', '<strong>Varian Lopez</strong><br>40% ($125K)', '<strong>Charlie Schema</strong><br>38% ($120K, <span style="color:red">$80k</span>)', '<strong>Ben Shorty<strong><br>36% ($450K, <span style="color:red">$120k</span>)', '<strong>Stephanie Smiles</strong><br>28% ($550K)', '<strong>Bruce Wallus</strong><br>25% ($104K)',
                            '<strong>Rick Martin</strong><br>24% ($390K)', '<strong>Natale Salesy</strong><br>21% ($330K)'];

$(document).ready(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },

        xAxis: [{
            categories: categories,
            gridLineidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            tickWidth: 0,
            labels: {
                enabled: false
            }
        }, { // miror axis on right side
            categories: categories,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            tickWidth: 0,
            linkedTo: 0,
                        labels: {
                align: 'center'
            }
        }],
        yAxis: [{
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            left:-60,
            width: 250
        },{
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            left:300,
            width: 250
        }],

        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]
       }, {
            name: 'Female',
            yAxis: 1,
            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]
        }]
    });
});

【讨论】：