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之后还有其他建议，我可以。谢谢。

继承人link

Answer 1

你无法在不破解Highcharts的情况下使用数据标签来做到这一点。

我建议你看看Annotations module。您可以将标签放置在图表上的任何位置，并自定义它们的外观。

此致

Answer 2

您可以使用您定义的外部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);
    }
  }
}

不漂亮，但它有效。当然，如果您愿意，可以通过循环图表来摆脱外部数据引用。以同样的方式，您可以不再需要为第二个系列创建静态数据集。

＆＃13;

  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
    }
            ]
  });

＆＃13;

<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>

＆＃13;

工作示例jsfiddle： https://jsfiddle.net/zjxp57n6/4/

使用plotOptions highchart（BAR）在栏下添加文本

2 个答案: