如何在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/