Highchart Funnel for Angular

Highchart Funnel for Angular

本文关键字:Angular for Funnel Highchart      更新时间:2023-09-26

有人在Angular中使用过Highchart漏斗吗?

我使用高图ng(https://github.com/pablojim/highcharts-ng),但对漏斗不起作用。

我使用ng highchart的代码是:

$scope.chartSalesFunnel = {
    options: {
        chart: {
            type: 'funnel',
            marginRight: 100
        },
        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
            }
        },
    },
    title: {
        text: '',
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }]
};

漏斗图类型需要额外的漏斗模块,如API中所述。

你可以这样包括它:

<script src="https://code.highcharts.com/modules/funnel.js"></script>

请参阅包含此模块的代码的更新JSFiddle。