Question

是否可以在水平条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离开条形，但高于相应的条形。

Answer 1

试试这个mate。用下面的

放置你的x轴属性

xAxis: {
            categories: cats,

            labels: {

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

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

        },

Fiddle

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

1 个答案: