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

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?

本文关键字:显示 系列 水平 jsHighchart 是否      更新时间:2023-09-26

是否可以在水平条jsHighchart中将类别显示在系列上方?

我知道如果您每个类别仅使用 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');
});

http://jsfiddle.net/jbw8ou5g/

这个想法是从柱线留下 1,2,3,4,5,但在相应的柱上方。

试试这个伙伴。将 x 轴属性替换为以下内容

xAxis: {
            categories: cats,
            labels: {
                style: {
                    display:'block',
                    fontWeight: 'bold',
                },
                x:350,
            },
            min:0,
        },

小提琴