2016-01-12 21 views
5

Veri sayfalarını göstermeye çalışıyorum. ancak DATALABEL siyah çubuk gösterilmiyor. niye ya?veri etiketi gösterilmiyor Highcharts

http://jsfiddle.net/o4pt855e/

diğer barlar de görüntülenir. Bu fırsatı bir durum nasıl koyabileceğimi sormak için alıyorum. Değer 5'ten küçükse, DATALABEL sola, aksi takdirde sağa gösterilir.

$(function() { 
$('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Mi EPS' 
     }, 
     xAxis: { 
      //categories: ["number1", "number2", "number3", "number4","number5"], 
      title: { 
       text: null 
      }, 
      labels: { 

      // align: 'center', 
       x: -5, 
       y: -20, 
       useHTML: true, 
       format: '<div style="position: absolute; left: 40px"> my labelL is very large ***************************************this in other line! </div> <img style="height: 30px; width: 30px; margin-top: 10px" src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>' 

      } 

     }, 
     yAxis: { 

      title: { 
       text: 'Resultado', 
       align: 'right' 
      } 

     }, 
     tooltip: { 
      valueSuffix: ' dollars' 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true, 
        align: 'left', 
        color: '#FFFFFF', 
        inside: true, 
        crop: false, 
        overflow:"none", 
         formatter: function() { 

        return this.series.name+ " "+ this.y; 

        console.log(this.series.name); 
       }, 
        style:{ 
         width:100 
        } 

       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'center', 
      verticalAlign: 'bottom', 
      x: -40, 
      y:40 , 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: '#FFFFFF', 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Mejor Eps', 
      data: [1000, 950,920,880,850], 
      color: "#FF0000" 
     }, { 
      name: 'Mi Eps', 
      data: [800,770,750,740,730], 
      color: "#000000" 

     }, { 
      name: 'Peor Eps', 
      data: [600,540,535,500,0], 
      color: "#00FF00" 

     }] 
    }); 
}); 
+0

Bu sizin kabul etmiyor gibi/sorununuzu çözer herhangi bir cevap onaylamak görünüyor. Yardımcı olan cevapları kabul ettiğinizden emin olun. – ketan

cevap

3

Her bir veri etiketinin hatalı olması bir dolgu malzemesine sahiptir ve diğer etiketle çakıştığında gizlenir. Bu nedenle padding değerini 0 ve allowOverlap seçeneği true olarak ayarlamanız gerekir.

plotOptions: { 
      bar: { 
       dataLabels: { 
       padding:0, 
       allowOverlap:true, 
        enabled: true, 
        align: 'left', 
        color: '#FFFFFF', 
        inside: true, 
        crop: false, 
        overflow:"none", 
         formatter: function() { 

        return this.series.name+ " "+ this.y; 

        console.log(this.series.name); 
       }, 
        style:{ 
         width:100 
        } 

       } 
      } 
     }, 

http://jsfiddle.net/vj19ukbc/