값에 따라 Highcharts 데이터 라벨을 배치 할 수 있습니까?

Question

저는 두 개의 막대가 서로 겹쳐서 가로 막 대형 차트를 표시하고, 오른쪽에 데이터 레이블을 표시하여 정확한 값을 표시합니다.

값이 80 %를 초과하면 레이블이 차트에서 프레임으로 넘치고 다른 텍스트로 넘어 가서 읽을 수 없게됩니다. 여기

은 내 plotOptions : 나는 this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;를 사용하여 이동 차트 옵션을 편집 할 수 있지만,이 작동하지 않습니다 생각

plotOptions: { 
      bar: { 
       groupPadding: 0.5, 
       pointWidth : 30, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        y:-5, 
        color:"black", 
        style: { 
         fontSize: "12px" 
        }, 
        formatter: function(){ 
         if(this.y > 80) 
         { 
          this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 
         } 
         if(this.series.name == "Tests OK") 
          return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
         else 
          return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
        } 
       } 
      } 
     } 

.

분명히 나는 ​​그런 문제를 겪은 첫 번째 사람이 아닙니다. 어떤 생각? 나 자신을 이것 좀 내려고 노력했습니다

감사

Answer 1

formatter 내에서 그렇게 할 수없는 것처럼 보입니다.

그러나 차트를 렌더링 (로드) 한 후에 설정할 수 있습니다. load callback이

$.each(chartObj.series[0].data, function(i, point) { 
    if(point.y > 100) { 
     point.dataLabel.attr({x:20}); 
    } 
}); 

같은 시도 (또는 당신은 redraw callback에 필요한 경우).

예 : here을 참조하십시오.

Answer 2

... 그것은 ...처럼 대신

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 

당신이 사용할 수 보이는

this.series.options.dataLabels.x = -20; 

. ..이 시점에서 필자는 필요한 경우 데이터 위치를 재 지정할 수 있도록 데이터 레이블의 위치를 ​​식별 할 수 있는지 이해하려고합니다.

Answer 3

Bhesh의 대답이 x/y 위치 지정 문제를 해결했지만 Highcharts는 dataLabels (see the problem here)의 스타일 속성에 대한 변경 사항을 무시합니다. 그러나 데이터 오브젝트를 통과하여 개별 지점의 스타일을 재정의 할 수

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }] 

example from Highcharts docs

나는 Highcharts에 전체 개체를 전달하기 전에 내 데이터의 반복에 의해 역동적 인 스타일을 얻을 수 있었다 렌더링합니다.

Answer 4

다음은 내가 결론지었습니다. setTimeout이 필요하거나 point에 dataLabel 속성이 없습니다.

formatter: function() { 
    var point = this.point; 
    window.setTimeout(function() { 
     if (point.s < 0) { 
      point.dataLabel.attr({ 
       y: point.plotY + 20 
      }); 
     } 
    }); 
    //this.series.options.dataLabels.y = -6; 
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>'; 
}