Highchart.js에 여러 라벨을 표시하는 방법은 무엇입니까?

Question

기본 폭포수 차트 (HighChart.js) basic Waterfall chart image example

각 열에 두 개의 레이블을 어떻게 표시합니까? 게다가 첫 번째 레이블은 열 맨 위에 있어야하고 다른 레이블은 열의 맨 아래에 있어야합니다. 이미지와 정확히 같아야합니다.

는 이제 두 개의 아이디어가 :

우선 라벨 제 차트 렌더링

가 두 번째 값을 추가 숨겨진 표 (예 : 링크 [http://jsfiddle.net/gk14kh3q/1/][3])에 렌더링한다

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'waterfall' 
    }, 

    title: { 
     text: 'Highcharts Waterfall' 
    }, 

    xAxis: { 
     type: 'category' 
    }, 

    yAxis: { 
     title: { 
      text: 'USD' 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 


    series: [{ 
     dataLabels: { 
      enabled: true, 
      // here need align label 
     } 
    }, { 
     dataLabels: { 
      enabled: true, 
      // here need align label 
     } 
    }] 
    }); 
}); 

1. 두 레이블을 형식의 기능과 형식의 사용 HTML 속성을 사용하여 하나로 결합하십시오. 그 후 CSS 또는 외부 js를 사용하여 라벨 위치를 지정하십시오

다른 관행이있을 수 있습니까? 나는 매우 기뻐할 것입니다. 토론조차도 유용 할 수 있습니다. 고맙습니다!

P. 제공된 이미지와 같이 차트에 아이콘을 삽입하는 방법은 무엇입니까?

Answer 1

chart.renderer.label을 사용하여 열 지점에 새 데이터 라벨을 추가 할 수 있습니다. 또한 차트에 화살표를 추가 chart.renderer.image를 사용할 수 있습니다

다음

var addLabels = function(chart) { 
    $('.custom').remove(); 
    var series = chart.series[0], 
     url; 
    Highcharts.each(series.data, function(p, i) { 
     if (i) { 
     chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({ 
      'text-anchor': 'middle' 
     }).addClass('custom').add(); 
     if (p.y > 0) { 
      url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png'; 
     } else { 
      url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' 
     } 
     chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add() 
     } 
    }); 
}; 

당신이 그것을 작동하는 방법을 예를 찾을 수 있습니다 http://jsfiddle.net/zc2fb8vt/