javascript - HighCharts 漏斗带有居中标签而不是右侧标签

Question

我正在使用 HighCharts，特别是漏斗。

目前，值标 checkout 现在漏斗的右侧，但我需要它们在漏斗内居中。

这里是 JS Fiddle 的链接:Example Here

这也是代码:

$(function () {

    $('#container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 100
        },
        title: {
            text: 'Sales funnel',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    softConnector: true
                },
                neckWidth: '30%',
                neckHeight: '25%'

                //-- Other available options
                // height: pixels or percent
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: [
                ['Website visits', 15654],
                ['Downloads', 4064],
                ['Requested price list', 1987],
                ['Invoice sent', 976],
                ['Finalized', 846]
            ]
        }]
    });
});

如何让这些标签在漏斗中居中？

Answer 1

我认为您可以在加载和重绘图表事件时使用 attr() 手动设置 dataLabels 的位置:

http://api.highcharts.com/highcharts/Element.attr

events: {
    load: function() {
      var chart = this;
      Highcharts.each(chart.series[0].data, function(p, i) {
        p.dataLabel.attr({
          x: (chart.plotWidth - chart.plotLeft) / 2,
          'text-anchor': 'middle'
        })
      })
    },
    redraw: function() {
      var chart = this;
      Highcharts.each(chart.series[0].data, function(p, i) {
        p.dataLabel.attr({
          x: (chart.plotWidth - chart.plotLeft) / 2,
          'text-anchor': 'middle'
        })
      })
    }
  }

在这里您可以找到它如何工作的示例: http://jsfiddle.net/bp03q6da/