Highchart.jsにいくつかのラベルを表示するには？

Question

私は基本的なウォーターフォールチャート（HighChart.js）を持っていますbasic Waterfall chart image example

どのように各列に2つのラベルを表示しますか？また、最初のラベルは列の一番上になければならず、別のラベルは列の一番下になければなりません。だから、それはまさにイメージに似ているはずです。

は今、私は2つのアイデアを持っている：

まずラベルが最初のグラフに描画される

は、第二の値は、追加の隠されたチャート（例へのリンク：[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. フォーマットとuseHTMLを使用して、2つのラベルを1つに結合します。その後、CSSまたは外部のjsを使用してラベルに設定した

他にもいくつかの習慣がありますか？私は非常に満足しています。議論さえも役に立ちます。ありがとうございました！

P.S.提供されたイメージのようにグラフにアイコンを挿入する方法は？

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/