如何在漏斗高图中的每个部分边缘添加文本

Question

在我上一个问题的帮助下，我能够为漏斗的所有部分设置相同的高度。如何在每个部分的边缘（右侧）添加一些额外的文本。我没有找到任何相关文件。我预期的漏斗图如下：

Highcharts.chart('container', {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                softConnector: true,
                inside: true,
            },
            neckHeight: "0%",
                neckWidth: "80%",
                width: '15%',
                reversed: true,
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        dataLabels: {
                            inside: true
                        },
                        center: ['50%', '50%'],
                        width: '100%'
                    }
                }
            }
        }]
    }
});

jsfiddle 示例：https://jsfiddle.net/kiranuk/xhfbyj64/

感谢您的帮助。

Answer 1

要在图表上添加额外的文本，请使用 Highcharts。 SVGRenderer

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

示例代码：

  chart: {
    type: 'funnel',
    events: {
      render: function() {
        let chart = this,
          point1 = chart.series[0].points[4],
          x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
          y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;

        if (!chart.myCustomText) {
          chart.myCustomText = chart.renderer
            .text('1% <br> Did')
            .css({
              fontSize: '10px',
              zIndex: '3px'
            })
            .add();
        }

        //pdate text coordinates
        chart.myCustomText.attr({
          x: x,
          y: y
        })
      }
    }
  },

演示： https://jsfiddle.net/BlackLabel/kLyt6ngs/

如何在漏斗高图中的每个部分边缘添加文本

How to add text on every section edges in funnel highcharts

javascript

highcharts