组合图表Highcharts饼形图加Bar grouppadding和pointapadding问题

Question

我正在尝试组合图表以在我的2个饼图系列下面显示条形图。我试图将“ Chart Title”下方的3个小节推开，但我无法通过highcharts中的grouppadding等不同参数来实现这一点。首先，我需要减少小节之间的间距以使其可能为10 px，然后需要在Semidonut Pie之后推动整个小节系列。无论如何要实现这一目标...

这大概是我的编码：

<HighchartWrapper
            chartOptions={{
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotBackgroundColor: null,
                    plotShadow: false,
                    height: 400,
                    width: 650,
                },

                tooltip: {

                    formatter: function () {
                        console.log('In tooltip:', this);
                        if (this.key === 'yoyfnbrev')
                            var txt1 = 'YOY Func Rev' + this.y;
                        return txt1;
                    },

                },
                plotOptions: {
                    pie: {
                        startAngle: -90,
                        endAngle: 90,
                        center: ['50%', '85%'],
                        size: '160%',
                        allowPointSelect: true,
                        cursor: 'pointer',

                        dataLabels: {
                            style: {

                                fontSize: '16px',
                                color: 'black',

                                style: {
                                    fontFamily: "'Lato', sans-serif",
                                },
                            },
                            formatter: function () {
                                if (this.series.name === 'revthisyear')
                                    return (

                                        this.point.y.toFixed(0) + '%'
                                    );
                                else if (this.series.name === 'revlastyear')
                                    return this.point.y.toFixed(0) + '%';

                            },
                        },
                    },

                },
                bar: {
                    groupPadding: 0,
                    pointPadding: 0,
                    dataLabels: {
                        enabled: true,
                    },
                },

                xAxis: {
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    gridLineColor: 'transparent',
                    title: {
                        text: null,
                    },
                    labels: {
                        enabled: false,
                    },
                },
                yAxis: {
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    gridLineColor: 'transparent',
                    opposite: true,
                    title: {
                        text: null,
                    },
                    labels: {
                        enabled: false,
                    },
                },
                series: [


                    {
                        type: 'pie',
                        name: 'revlastyear',
                        innerSize: '40%',
                        data: [20,40,40],
                        colors: ['#1a7ead', '#e95326', '#008540'],
                        dataLabels: {
                            enabled: true,
                            // inside: true,
                            distance: -140,
                        },
                    },
                    {
                        type: 'pie',
                        name: 'revthisyear',
                        innerSize: '60%',
                        data: [[10, 70, 20],
                        colors: ['#1a7ead', '#e95326', '#008540'],
                        dataLabels: {
                            enabled: true,
                            // inside: false,
                            distance: -60,
                        },
                    },

                    {
                        type: 'bar',
                        name: 'yoyrev',
                        // innerSize: '10%',
                        data: [20, -100, -50],
                        colors: ['#1a7ead', '#e95326', '#008540'],
                        pointWidth: 10,
                        pointPadding: 0,
                        groupPadding: 0.3,
                    },
                ],

            }}
        />

Answer 1

我认为一个好的解决方案是对此栏使用独立的yAxis和xAxis，为它们设置较小的高度并更改饼图中心值。参见：

 xAxis: [{
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    gridLineColor: 'transparent',
    title: {
      text: null,
    },
    labels: {
      enabled: false,
    },
  }, {
    height: '20%'
  }],

演示：https://jsfiddle.net/BlackLabel/jc3fLvt1/1/

API：https://api.highcharts.com/highcharts/series.pie.center

API：https://api.highcharts.com/highcharts/series.bar.yAxis

Answer 2

最简单的解决方案是创建另一个图表：

Highcharts.chart('container', {
    ...,
    series: [{
        type: 'pie',
        ...
    }]
});

Highcharts.chart('container2', {
    ...,
    series: [{
        type: 'bar',
        ...
    }]
});

---

实时演示： http://jsfiddle.net/BlackLabel/r9yz6qdk/