2013-02-08 2 views
1

http://jsfiddle.net/nUCBj/1/HighCharts의 DataLabels는

가 어떻게 겹쳐에서 datalabels을 방지 할 수 오버랩? 나는 포매터 옵션을 사용하고 CSS 위치/위/아래 등을 사용하여 dataLabel을 배치하려고 시도했다. datalabels가 필요하다.

감사합니다 :-)이 곳의에 난 그냥, 툴팁을 사용할 수 없습니다

$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       backgroundColor: 'rgba(255, 255, 255, 0.7)', 
       borderWidth: 1, 
       shadow: true, 
       borderRadius: 1, 
       useHTML: true, 
       padding: 1 
      } 
     } 
    }, 

    series: [{ 
         name: 'test', 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{ 
      name: 'test2', 
     data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54] 
    }] 
}); 

});

답변

1

계열의 데이터 특성은 숫자 배열 대신 개체 배열로 전달할 수 있습니다. 각 개체는 자체 dataLabels 옵션 (http://api.highcharts.com/highcharts#series.data)을 정의 할 수 있습니다. 첫 번째 시리즈의 경우 점을 왼쪽으로 정렬하고 두 번째는 오른쪽으로 정렬하여 겹치지 않게 할 수 있습니다.

+0

좋아, 나는 너의 충고와 연결을 따랐다. 불행히도, 나는 X와 Y 좌표를 사용하여 데이터를 그래프로 푸시합니다. 따라서 데이터는 [[x, y], [x, y], etc ...]처럼 보입니다. DataLabels 특성을 어떻게 적용 할 수 있습니까? JFiddle에서 시도했지만 작동시키지 못했습니다. 여기 내 링크가 있습니다 : [link] (http://jsfiddle.net/vm34W/1/) –

+0

만약 내가 이런 식으로 대신 할 수 있다면 좋을 것입니다. (그러나 그것이 작동하는 경우에만) : [link] (http : //www.youtube.com/watch?v=WAF2h&yuchi122&nucbj/2/) –

+0

멋지다 (위부터), 나는 뜻을 뜻한다 : function() {... –

관련 문제