更新Highcharts上的DataLabels位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更新Highcharts上的DataLabels位置相关的知识,希望对你有一定的参考价值。

当我使用dataLabel.translate命令更新DataLabels位置工作正常,但如果我使用yAxis [i] .update命令,Highcharts不再移动任何DataLabel。

如果选择“更新数据”,则“数据标签”不会移动,否则它们会正确移动。 fiddle example

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type:'column',        
    events:
    {
        load: function(){
            for(var j = 0; j < this.series.length; j++) {
                for(var i = 0; i < this.series[j].data.length; i++) {
                    var d = this.series[j].data[i];
                    d.dataLabel.translate(d.dataLabel.x, d.dataLabel.y-50);
                }
            }
        }
    }        
  },
  plotOptions: { series: {dataLabels: {enabled: true} } },    
  xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr']},    
  yAxis: {max: 100, min:0},    
  series: [{data: [60, 70, 45, 85]}]} , function(chart){
if(confirm('Update on YAxis?'))
{
  chart.yAxis[0].update({
      max: 500,
      min: 50,
      tickInterval: 50
  });
}});

任何想法如何仍然更新X轴数据和更改数据标签位置?

答案

如果将事件从load更改为render,从translateattrd.dataLabel.yd.dataLabel.alignAttr.y,则代码将起作用:

    events: {
      render: function() {
        for (var j = 0; j < this.series.length; j++) {
          for (var i = 0; i < this.series[j].data.length; i++) {
            var d = this.series[j].data[i];
            d.dataLabel.attr({
              y: d.dataLabel.alignAttr.y - 50
            });
          }
        }
      }
    }
  },

现场演示:http://jsfiddle.net/BlackLabel/LL4z4eL5/

顺便说一下,使用dataLabels.y属性更简单的方法:http://jsfiddle.net/BlackLabel/tpor20xa/

以上是关于更新Highcharts上的DataLabels位置的主要内容,如果未能解决你的问题,请参考以下文章

Highcharts - redraw() 与新的 Highcharts.chart

HIGHCHARTS:drilldown.js更改饼图标签颜色

highcharts

Highcharts饼图导出,标签渲染两次

谁用过 highcharts,怎么设置 数据显示在柱子上方

Highcharts 高图在数据标签下显示气泡的工具提示。