Highcharts与负面堆栈栏：如何定位数据标签

我有一个像这样的人口金字塔：jsfiddle。我想调整条和数据标签之间的距离。但是，当我使用x参数时，标签一边靠得更近，另一边离图更远。Highcharts与负面堆栈栏：如何定位数据标签

$(function() { 
    var chart, 
     categories = ['0-9', '10-19', 
      '20-29', '30-39', '40-49', '50-59', '60-69', 
      '70-79', '80-89', '90 +']; 
    $(document).ready(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Population pyramid for Germany, midyear 2010' 
      }, 
      subtitle: { 
       text: 'Source: www.census.gov' 
      }, 
      xAxis: [{ 
       categories: categories, 
       reversed: false, 
       labels: { 
        step: 1 
       } 
      }, { // mirror axis on right side 
       opposite: true, 
       reversed: false, 
       categories: categories, 
       linkedTo: 0, 
       labels: { 
        step: 1 
       } 
      }], 
      yAxis: { 
       title: { 
        text: null 
       }, 
       labels: { 
        formatter: function(){ 
         return (Math.abs(this.value)/1000000) + 'M'; 
        } 
       }, 
       min: -8000000, 
       max: 8000000 
      }, 

      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true, 
         formatter: function() { 
          return Math.round(Math.abs(this.y)/1000) + 'T'; 
         }, 
         inside: false, 
         x: 10 // <--- This doesn't realy work as I need it to!!! 
        } 
       }, 
       series: { 
        stacking: 'normal' 
       } 
      }, 

      tooltip: { 
       formatter: function(){ 
        return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+ 
         'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0); 
       } 
      }, 

      series: [{ 
       name: 'Male', 
       data: [-3630609, -4312120, -5044512, -5107716, -7236736, -5864184, -4456949, -3506268, -1191588, -122814] 
      }, { 
       name: 'Female', 
       data: [3443718, 4090246, 4769441, 4821276, 6854069, 5810335, 4730948, 4354576, 2452173, 482710] 
      }] 
     }); 
    }); 

});

我想留在本地，并接近Highcharts作为posible。我尽量避免使用useHTML: true，因为我需要将它导出为SVG，这对于稍后的一个相当繁琐的脚本来说是必需的（有时这会在过去造成我的麻烦）。但无论如何，如果没有它，那么你可能会建议我。

你知道有什么方法可以实现数据标签在负栈上的对称定位吗？

提前感谢和最诚挚的问候。

来源

2014-01-30 Seika85

您可以使用填充来在标签和条之间添加空格。填充高达8似乎适用于你的情况。

... 
plotOptions: { 
    bar: { 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return Math.round(Math.abs(this.y)/1000) + 'T'; 
      }, 
      inside: false, 
      padding: 8, // <-- Instead of x 
      y: -1 // This is only to beautify 
     } 
    }, 
    series: { 
     stacking: 'normal' 
    } 
}, 
...

不幸的是，如果你增加填充过多，数量将不适合的空间了，而且你必须增加最大值和最小值（这样http://jsfiddle.net/2Ht35/1/）。

来源

2014-01-30 11:16:49 martinczerwi

这是给出的最美丽和最方便的答案。我开始使用'yAxis.maxPadding'进行体验，但是因为使用了'min'和'max'，所以无法使用。我只是不知道和发现'dataLabels.padding'。谢谢。 :) – Seika85

我用了很久的一个选项可能会帮助你，以编程方式放置svg元素。检查这是否适合你。

$.each(chart.series[0].data,function(i,data){ 

    position = chart.yAxis[0].toPixels(0); 


    if(data.y < 0) 
     position-=10; 
    else 
     position-=70; 

    data.dataLabel.attr({ 
     x:position 
    }); 
});

来源

2014-01-30 11:16:00

这更多的是一种变通方法，我想用highcharts选择，尽量保持原生。但是，谢谢你的努力。 – Seika85

我们通过给+1表示感谢。 :) –

我给+1，如果答案对我有帮助。 ;）只是想友好。 – Seika85

您不必指定plotOptions x偏移量，但对于每一个系列不同，请参见：http://jsfiddle.net/2Ht35/3/

 series: [{ 
      name: 'Male', 
      dataLabels: { 
       x: -10, 
      }, 
      data: [-3630609, -4312120, -5044512, -5107716, -7236736, -5864184, -4456949, -3506268, -1191588, -122814] 
     }, { 
      name: 'Female', 
      dataLabels: { 
       x: 10, 
      }, 
      data: [3443718, 4090246, 4769441, 4821276, 6854069, 5810335, 4730948, 4354576, 2452173, 482710] 
     }]

来源

2014-01-30 12:24:02

确实有用的答案，如果您想为每个系列单独设置特定的位置/距离。但是我更喜欢'dataLabels.padding'的使用。 – Seika85

Highcharts与负面堆栈栏：如何定位数据标签

回答

相关问题