是否可以在 highchart 中将百分比放在列的中间？

Question

我正在使用 Highchart 创建如下柱形图，但我很难将百分比放在列中，我想将百分比放在列的中间，如下图所示。请您提出建议。

Link: https://jsfiddle.net/dhitiacahya/po8j7sub/7/

 Highcharts.chart('container', {
    title: {
        text: 'column'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Jane',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'John',
        data: [2, 3, 5, 7, 6]
    },]
});

Answer 1

添加如下所示的绘图选项

    plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.y + "%";
            }
        }
    },
    bar: {
        dataLabels: {
            enabled: true
        }
    },
    column: {
        dataLabels: {
            enabled: true
        }
    }
},

Answer 2

经过几个小时的搜索和尝试代码，我终于找到了制作图表的方法。

解决方案：

我添加了一个新的 y 点作为样条图
将 zoomType: xy 放入图表对象中。
把一个数组做成一个数组，这样你就可以辅助yAxis了。

这里是 link:

var chart = Highcharts.chart('container', {
 chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}%',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Percentage',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true

    },{
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
      
        }],
   
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
            yAxis: 1,
        name: 'Jane',
        data: [1000000, 1000000, 1000000, 1000000, 1000000],
       
    }, {
        type: 'column',
            yAxis: 1,
        name: 'John',
        data: [2000000, 2000000, 2000000, 2000000, 2000000]
    },
    {
        name: 'Percentage',
        type: 'spline',
        data: [92, 97, 93, 98, 105],
        tooltip: {
            valueSuffix: ' °%'
        },
          dataLabels: {
            enabled: true,
            formatter:function() {
                        return this.y+ '%';
            }
        }
    }]
});

chart.series[2].options.color = "#";
chart.series[2].update(chart.series[2].options);

这是 link : https://jsfiddle.net/dhitiacahya/Lymxq9aj/80/

是否可以在 highchart 中将百分比放在列的中间？

Is it possible in highchart to put percentage in the middle of the column?

javascript

jquery

highcharts