2017-02-16 1 views
0

人、金銭的価値とパーセンテージを示すグラフがあります。ハイチャートのデータラベルを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" 
     }] 
    }); 
}); 

: メアリーは代わりに4623450の65%のdatalabelを持つことになり、 ジョンは代わりに1848380の26%のdatalabelを持つことになり、 ジェーンはなく、640170

の9%のdatalabelを持っているでしょう

これを行う方法はありますか?

See jsfiddle here

答えて

0

が解決しよう!

ように単純:

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

関連する問題