需要将Highcharts数据标签设置为与y轴不同

问题描述：

我有一个显示人员，货币值和百分比的图表。需要将Highcharts数据标签设置为与y轴不同

我想显示百分比作为数据标签而不是货币的值。

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: false 
       } 
      }, 
     bar: { 
      dataLabels: 
      { 
       allowOverlap:true, 
       enabled: true, 
       align: 'right', 
       overflow:"none", 
       formatter: function() { return this.y;}, 
      } 
     }    
     }, 
     xAxis: { 
      categories: ["Mary<br/>$ 4,623,450","John<br>$  1,848,380","Jane<br/>$ 640,170"] 
     }, 
     series: [{ 
      "data": [ 
       ["65%",4623450], 
       ["26%", 1848380], 
       ["9%", 640170] 
      ], 
      "name": "Session1" 
     }] 
    }); 
});

所以：玛丽将有65％的datalabel代替4623450，约翰将有26％的datalabel代替1848380，简将有9％的datalabel，而不是640170

有没有办法做到这一点？

See jsfiddle here

答

已解决！

简单：

formatter: function() { return this.key;},

全码：

$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'bar' 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: false 
      } 
     }, 
    bar: { 
     dataLabels: 
     { 
      allowOverlap:true, 
      enabled: true, 
      align: 'right', 
      overflow:"none", 
      formatter: function() { return this.y;}, 
     } 
    }    
    }, 
    xAxis: { 
     categories: ["Mary<br/>$ 4,623,450","John<br>$  1,848,380","Jane<br/>$ 640,170"] 
    }, 
    series: [{ 
     "data": [ 
      ["65%",4623450], 
      ["26%", 1848380], 
      ["9%", 640170] 
     ], 
     "name": "Session1" 
    }] 
});

}）;

Updated jsfiddle here

需要将Highcharts数据标签设置为与y轴不同

相关推荐