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

k4aesqcs  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(177)

有了上一个问题的帮助,我可以为漏斗的所有部分设置相同的高度。我如何在每个部分的边缘(右侧)添加一些额外的文本。我没有找到任何文档。我期望的漏斗图如下:

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

jsfidle示例:https://jsfiddle.net/kiranuk/xhfbyj64/
谢谢你的帮助。

wfsdck30

wfsdck301#

若要在图表上添加额外文本,请使用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/

相关问题