Question

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

目前，价值标签出现在渠道的右侧，但我需要它们在漏斗内，居中。

以下是JS小提琴的链接：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/

具有中心标签的HighCharts漏斗而不是右侧

1 个答案: