Angular的Highchart漏斗

时间:2016-03-24 20:31:01

标签: javascript angularjs charts highcharts

有人曾使用Highchart Funnel for 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]
        ]
    }]
};

1 个答案:

答案 0 :(得分:2)

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

你可以这样包括:

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

请参阅此代码的this updated JSFiddle代码。