Question

每当我调整图表大小时，我的代码都无效。

我想在同一高度显示我的所有数据标签，但我无法调整它。所有数据标签应高于我在代码中计算的最大高度。最大高度是最大数据值的两倍.Plz帮助我。

以下是我的jsfiddle链接

var i = 0, max = 0, min = 0;

var val = [-6, 5, 10, 4];
var cat = ['Sep-2016', 'Oct-2016', 'Nov-2016', 'Dec-2016'];
var color = ['#f442d4', '#41f4f1', '#4149f4', '#f49a41'];
var fixed = [];
var variable = [];

var val2= new Array();

for( i=0; i<val.length; i++ )
{
   var str = {y:0, color: ""};
   str.y = val[i];
   str.color = color[i]; 
   val2.push(str); 
}

for(i=0;val[i];)
{
    if(min>val[i])
    min=val[i];

    if(max<val[i])
    max=val[i];

    i++;
}

max=2*max;

if(min<0)
min=2*min;
else
min=0;

for( i=0; i<val.length; i++ )
{
   if(val[i]<0)
   fixed.push(-2);
   else
   fixed.push(2);
}

for( i=0; i<val.length; i++ )
{
   if(val[i]<0)
   {
      variable.push(min-fixed[i]-val[i]);
   }
   else
   {
      variable.push(max-fixed[i]-val[i]-2);
   }
}


var seriesData= [{
    type: 'areaspline',
    color: '#e1e4e8',
    data: val,
    dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    color: '#bbc1c9',
    data: fixed,
     dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    color: '#dce0e5',
    data: variable,
    dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    data: val2,
    dataLabels:{
    enabled:true,
     formatter: function () {
            return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";transform:translate(0px,-150px)'>" + this.point.y +"</div></html>";
        },
        useHTML:true,
    }
  }]


Highcharts.chart('container', {

   credits: {
        enabled: false
   },
  chart: {
      backgroundColor: '#f4f7f7'
    },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: cat,
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    max: max,
    min: min,
    tickInterval: 2,
    labels: {
          enabled: false
    },
    title: {
          text: '',
    },
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: '#FFFFFF',
    },
    series: {
      pointWidth: 5,
      borderWidth: 0,
      stacking: 'normal',
    }
  },
  series: seriesData,
});

注意：最大正值：160，最大负值：-60

进一步参考，您可以查看下图

Answer 1

在此行添加 jQuery的（＆＃39; .highcharts标签＆＃39）。CSS（＆＃39;顶部＆＃39;＆＃39; 0像素＆＃39）;

并更新你的编队

formatter: function () {
        return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";position:absolute;left:-15px'>" + this.point.y +"</div></html>";

https://jsfiddle.net/f3gscp3d/1/

数据标签位置

1 个答案: