2016-08-31 8 views
0

私はHighCharts、特にファネルを使用しています。HighChartsファネル(ラベルの代わりに中央のラベルが付いています)

現時点では、値ラベルがファンネルの右側に表示されていますが、ファンネルの中央に値札が必要です。ここで

はJSフィドルへのリンクです:Example Here

そしてここでは、あまりにもコードです:

$(function() { 

    $('#container').highcharts({ 
     chart: { 
      type: 'funnel', 
      marginRight: 100 
     }, 
     title: { 
      text: 'Sales funnel', 
      x: -50 
     }, 
     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b> ({point.y:,.0f})', 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        softConnector: true 
       }, 
       neckWidth: '30%', 
       neckHeight: '25%' 

       //-- Other available options 
       // height: pixels or percent 
       // width: pixels or percent 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Unique users', 
      data: [ 
       ['Website visits', 15654], 
       ['Downloads', 4064], 
       ['Requested price list', 1987], 
       ['Invoice sent', 976], 
       ['Finalized', 846] 
      ] 
     }] 
    }); 
}); 

は、どのように私はこれらのラベルは、ファンネルの内側中心に得ることができますか?

答えて

1

私はあなたが手動で負荷に)(ATTRを使用してdataLabelsの位置を設定し、グラフのイベントを再描画できると思う:

ここ

http://api.highcharts.com/highcharts/Element.attr

events: { 
    load: function() { 
     var chart = this; 
     Highcharts.each(chart.series[0].data, function(p, i) { 
     p.dataLabel.attr({ 
      x: (chart.plotWidth - chart.plotLeft)/2, 
      'text-anchor': 'middle' 
     }) 
     }) 
    }, 
    redraw: function() { 
     var chart = this; 
     Highcharts.each(chart.series[0].data, function(p, i) { 
     p.dataLabel.attr({ 
      x: (chart.plotWidth - chart.plotLeft)/2, 
      'text-anchor': 'middle' 
     }) 
     }) 
    } 
    } 

あなたはそれが動作する方法の例を見つけることができます。 http://jsfiddle.net/bp03q6da/

関連する問題