добавить текст под панель с графиком plotOptions (BAR)

Question

Привет, я пытаюсь добавить дополнительный текст на plotOptions datalabels для каждого бара.я получаю значение, которое хочу, но не могу расположить его под столбцами.

мой код

    plotOptions: {
           series: {
               dataLabels: {

                 useHTML: true,
                  formatter:function() {
                     var pcnt = (this.y / dataSum) * 100;
                        return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + this.point.name + ' this i want put under the bar' + '</span>';
                 }}
           }
    }

я стараюсь не использовать datalabels из xasix, потому что хочупокажи это тоже.Как сделать дополнительный текст, расположенный под каждой полосой?

, если у кого-то есть еще предложения, кроме использования plotoptions, я в порядке с этим.спасибо.

вот ссылка

Answer 1

Вы можете сделать это, используя заданный вами внешний массив data и добавив поддельную серию, например:

chart: {
  ...,
  events: {
    load: function() {         
      this.addSeries({
        data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
        enableMouseTracking: false,
        dataLabels: {
          useHTML: true,
          formatter:function() {
            var pcnt = (data[this.x].y / dataSum) * 100;
            return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
          }
        }
      }, true);
    }
  }
}

Не очень, но это работает.Конечно, вы можете избавиться от ссылки на внешние данные, если хотите, пройдя по диаграмме.И таким же образом вы можете устранить необходимость создания статического набора данных для второй серии.

  var data = [
    {
      name: 'item 1',
      y: 1756,
      fontWeight: 'bold',
      
    },{
      name: 'item 2',
      y: 512,
      fontWeight: 'bold',
      
    },{
      name: 'item 3',
      y: 756,
      fontWeight: 'bold',
      
    },
    {
      name: 'item 4',
      y: 956,
      fontWeight: 'bold',
      
    }
  ]


  var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
  var dataSum = data.reduce((a,x)=>a+x.y,0);
  Highcharts.chart('highchart', {
    chart: {
      type: 'bar', 
      backgroundColor: null,
      height: 270,
      events: {
        load: function() {         
          this.addSeries({
                data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
                enableMouseTracking: false,
                dataLabels: {
                  useHTML: true,
                  formatter:function() {
                    var pcnt = (data[this.x].y / dataSum) * 100;
                    return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
                  }}
          }, true);
        }
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      labels: {
        style: {
          width: '75px',
          'min-width': '75px',
          height: '42px',
          'min-height': '42px',
          align: 'high'
        },
        useHTML : true,
        formatter: function () {
                        return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
                    },
      }
    },
    colors: colors,
    yAxis: {
      min: 0,
      gridLineWidth: 0,
      title: {
        text: ''
      },
      gridLineWidth: 0,
      labels:
      {
        enabled: false
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        borderWidth: 0,
        pointPadding: 0.25,
        groupPadding: 0,
        dataLabels: {
          enabled: true,
          crop: false,
          overflow: 'none'
        },
        colorByPoint: true
      }
    },

    tooltip: {
      headerFormat: '<span style="font-size:11px"> lorem</span><br>',
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
    },

    series: [{
      data: data
    }
            ]
  });    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src=https://code.highcharts.com/modules/drilldown.js></script>
<div id="highchart" style="height: 400px"></div>

Рабочий пример jsfiddle: https://jsfiddle.net/zjxp57n6/4/

Answer 2

Вы не сможете сделать это с метками данных без взлома Highcharts.

Я предлагаю вам взглянуть на Модуль аннотаций .Вы можете расположить метки в любом месте на графике и настроить их внешний вид.

С уважением