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
        }
    }]
  });
});

使用格式化功能和 useHTML 属性将两个标签合二为一。然后使用css或外部js

可能存在其他一些做法吗？我很乐意帮忙。甚至讨论也很有用。谢谢！

P.S。如何将图标插入图表中，如图所示？

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/

如何在Highchart.js中显示多个标签？

1 个答案: