如何在Highchart.js中顯示幾個標簽？

Question

我有基本的瀑布圖（HighChart.js） 基本的瀑布圖圖像示例

如何在每列上顯示兩個標簽？ 此外，第一個標簽必須在列的頂部，另一個標簽必須在列的底部。 因此，它應該與圖像上完全一樣。

現在我有兩個想法：

1. 第一個標簽顯示在第一個圖表上，第二個值顯示在其他隱藏的圖表上（鏈接到示例：[ 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 } }] }); }); 

2. 通過使用格式化功能和useHTML屬性，將兩個標簽合二為一 。 然后通過使用CSS或外部js將位置設置為標簽

可能存在其他一些做法？ 我會很高興獲得幫助。 甚至討論也可能有用。 謝謝！

PS如何在圖標上插入圖標，就像提供的圖像一樣？

Answer 1

您可以使用chart.renderer.label為您的列點添加新的dataLabel。 您還可以使用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/