Question

我在互联网上看了一遍，似乎无法找到如下的高保真：

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

Answer 1

操纵width个轴时，可以使用百分比。看一下下面的例子。

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

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

Answer 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]
        }]
    });
});

Highcharts如何绘制双轴负堆栈栏？

2 个答案: