Question

我使用此脚本制作了一个漏斗

$(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: false
                },
                neckWidth: '2%',
                neckHeight: '0%',

                //-- Other available options
                //height: pixels or percent
                width: '100%'
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: [
                ['Item 1',   15005],
                ['Item 2',       1681],
                ['Item 3', 1254],
                ['Item 4',    1165],
                ['Item 5',    800],
                ['Item 6',    60],
                ['Item 7',    202],
            ]
        }]
    });
});

http://jsfiddle.net/fainz777/j7p76n6r/1/

如果可以进入此视图http://c2n.me/38zvhae？每个条的高度相等，只有宽度取决于值。

感谢您的帮助。

Answer 1

Highcharts API中没有用于制作该图表的功能。漏斗类型图表的宽度从锥形到直线只有一个变化。

相反，您可以尝试使用区域范围类型图表。 JSFiddle：http://jsfiddle.net/rb4j0unv/

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'arearange',
            inverted: true,
            zoomType: 'x'
        },
        legend: {
            enabled: false
        },

        series: [{
            data: [{low:-100, high:100, x: 0},{low:-50, high:50, x: 1}]
        },{
            data: [{low:-50, high:50, x: 1},{low:-40, high:40, x: 3}]
        },{
            data: [{low:-40, high:40, x: 3},{low:0, high:0, x: 4}]
        }]
    });
});

Highcharts.js：自定义漏斗

1 个答案: