數據標籤現在的位置

每當我調整我的圖我的代碼將無法正常工作。數據標籤現在的位置

我想顯示在同一高度上我的數據標籤，但我無法調整它。所有數據標籤應該高於我在代碼中計算出的最大高度。最大高度是最大數據值的兩倍。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

進一步引用您可以檢查下面圖像

來源

2017-03-02 Jatin Kumar

在結尾處加上這一行 jQuery的（ 'highcharts標籤。 '）的CSS（' 頂部'， '0像素'）。

和更新格式化器

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/

來源

2017-03-02 12:43:14

一件事，加上重新定位上重繪事件https://jsfiddle.net/f3gscp3d/2/ – morganfree

如果我給大數據將無法正常工作值如'var val = [-50,160,10,4];'。根據你的代碼，第三堆積列將被datalabel隱藏起來。 –

，我可以看到它看起來是正確的https://jsfiddle.net/p456m83m/ –

數據標籤現在的位置

回答

相關問題