在绘图栏中显示两个数据标签?

时间:2015-04-13 02:20:04

标签: highcharts

以下是一个简单示例:http://jsfiddle.net/vecmftmh/

这是示例的数据标签部分:

plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    allowOverlap: true
                }
            }
        }

此图显示每列顶部的数据标签。我怎样才能在每列中显示数据标签?

2 个答案:

答案 0 :(得分:3)

Highcharts 上没有任何选项可以处理两个数据标签。但您可以将此解决方法与 dataLabels.formatter useHTML:true 一起使用:

useHTML:true,
formatter: function() {
    return '<div class="datalabel" style="position: relative; top: 20px"><b>'+ this.y +
           '</div><br/><div class="datalabelInside" style="position: absolute; top: 45px"><b>'+ this.y +'</div>';
}

这样您就可以手动添加两个带有自定义位置和样式的 dataLabels 。在您的情况下,一个内部列和一个外部。这是DEMO

答案 1 :(得分:0)

查看此内容:Since v6.2.0, multiple data labels can be applied to each single point by defining them as an array of configs.

示例:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-multiple