Javascript 是否可以将类别显示在水平条形图中系列的上方？

是否可以将类别显示在水平条形图中系列的上方

我知道，如果每个类别只使用1个系列，这是可能的。但我想知道，当使用多个系列时，这是否也是可能的

我现在所拥有的：

$(function () {
var cats        = ['1', '2', '3', '4', '5'];
  var width     = 375;
  var height    = cats.length * 100;
  var value = 0;

  var maxScore = 2453 + 50; 

    var chart = $('.highchart').highcharts({

        chart: {
            backgroundColor:'#fff',
            type: 'bar',
            width:width,
            height:height,
        },

        title: {
            text: ''
        },
        credits: {
                  enabled: false
              },
        exporting: { enabled: false },
        legend: {
            enabled: false
        },
                scrollbar: {
                enabled: false
            },
        xAxis: {
            categories: cats,

            labels: {

                style: {
                    display:'block',
                    fontWeight: 'bold',
                }
            },
            min:0,

        },

        yAxis: {
                   /* stackLabels: {
                    formatter: function() {

                                                    return this.axis.chart.xAxis[0].categories[this.x];


                      },
                      enabled: true,           
                          verticalAlign: 'top',     
                          align: 'left',
                y: -5
                    },*/
            allowDecimals: false,
            min: 0,
            max: maxScore,
            gridLineWidth: 0,
            title: {
                text: '',
                 rotation:0,
                         margin:0
            },
            labels: {
                formatter: function () {
                  return '';
                },
            },

        },

     tooltip: {
            enabled:false,
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
                plotOptions: { bar:{borderWidth:0, dataLabels:{align:'right'}},series: { pointWidth: 25, pointPadding: 0, groupPadding: 0.24} },

        series: [{
            name: 'score1',
            data: [800, 1312, 833, 944, 432],
            stack: 'you',
            color: 'blue',
            dataLabels: {
                    enabled: true,
                    color: 'blue',
                    align: 'center',
                    x: 25,
                    y: 0,
                    style: {
                        fontSize: '13px',
                        fontWeight: 'bold',
                    },
                    useHTML: true
                }
        }, {
            name: 'score2',
            data: [2208, 800, 1375, 1531, 971],
            stack: 'academy',
            color: 'red',
            dataLabels: {
                    enabled: true,
                    color: 'red',
                    align: 'center',
                    x: 25,
                    y: 0,
                    style: {
                        fontSize: '13px',
                        fontWeight: 'bold',
                    },
                    useHTML: true
                }
        }],

    });

    $hc = $('.highchart');
});

---

我们的想法是将1,2,3,4,5保留在条形图的左侧，但在相应条形图的上方。

尝试此匹配。将x轴属性替换为以下属性

xAxis: {
            categories: cats,

            labels: {

                style: {
                    display:'block',
                    fontWeight: 'bold',

                },
                x:350,
            },
            min:0,

        },

---

您希望类别显示在右侧心灵感应中。？？Thx alot mate！这不完全是我的意思，但我解决了，因为你的答案无论如何！在一组条之间有巨大的空白。你知道我怎样才能摆脱他们吗？groupPadding似乎不起作用。groupPadding不起作用，因为您用pointWidth参数覆盖了它。因此，您不需要决定使用点宽度或组填充。