Highchart Column没有向下钻取

时间:2015-10-12 15:38:43

标签: javascript jquery highcharts

您好我已经创建了一个Column highchart,如下所示

http://jsfiddle.net/woon123/Lgehd2mb/1/

$(function () {
    $('#venue_chart').highcharts({
        credits: {
            enabled: false
        },
        title: {
            text: 'Popularity of Venues'
        },
        subtitle: {
            text: 'View and Redemption Count'
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of Users'
            }
        },
        xAxis: {
            categories: [
                "Chicken Up @ Jurong East",
                "Chicken Up @ Tanjong Pagar",
                "Chicken Up @ Tampines", ]
        },
        labels: {
            items: [{
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        chart: {
            type: 'column'
        },
        series: [{
            name: 'View Count',
            data: [{
                y: 370,
                drilldown: "Chicken Up @ Jurong East" + " view"
            }, {
                y: 410,
                drilldown: "Chicken Up @ Tanjong Pagar" + " view"
            }, {
                y: 370,
                drilldown: "Chicken Up @ Tampines" + " view"
            }, ]
        }, {
            name: 'Redemption Count',
            data: [{
                y: 224,
                drilldown: "Chicken Up @ Jurong East" + " redeem"
            }, {
                y: 254,
                drilldown: "Chicken Up @ Tanjong Pagar" + " redeem"
            }, {
                y: 224,
                drilldown: "Chicken Up @ Tampines" + " redeem"
            }, ]
        }],
        drilldown: {
            series: [{
                name: "Chicken Up @ Jurong East" + " view",
                id: "Chicken Up @ Jurong East" + " view",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 50],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 30],
                    [
                        "Soju Cocktails at $17.00", 50],
                    [
                        "4pcs Fried Chicken @ $8.00", 20],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
                    [
                        "12345678", 210], ]
            }, {
                name: "Chicken Up @ Jurong East" + " redeem",
                id: "Chicken Up @ Jurong East" + " redeem",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 40],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 20],
                    [
                        "Soju Cocktails at $17.00", 40],
                    [
                        "4pcs Fried Chicken @ $8.00", 15],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
                    [
                        "12345678", 101], ]
            }, {
                name: "Chicken Up @ Tanjong Pagar" + " view",
                id: "Chicken Up @ Tanjong Pagar" + " view",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 50],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 30],
                    [
                        "Soju Cocktails at $17.00", 50],
                    [
                        "4pcs Fried Chicken @ $8.00", 20],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
                    [
                        "Early Bird 20% Off Bill", 40],
                    [
                        "12345678", 210], ]
            }, {
                name: "Chicken Up @ Tanjong Pagar" + " redeem",
                id: "Chicken Up @ Tanjong Pagar" + " redeem",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 40],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 20],
                    [
                        "Soju Cocktails at $17.00", 40],
                    [
                        "4pcs Fried Chicken @ $8.00", 15],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
                    [
                        "Early Bird 20% Off Bill", 30],
                    [
                        "12345678", 101], ]
            }, {
                name: "Chicken Up @ Tampines" + " view",
                id: "Chicken Up @ Tampines" + " view",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 50],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 30],
                    [
                        "Soju Cocktails at $17.00", 50],
                    [
                        "4pcs Fried Chicken @ $8.00", 20],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
                    [
                        "12345678", 210], ]
            }, {
                name: "Chicken Up @ Tampines" + " redeem",
                id: "Chicken Up @ Tampines" + " redeem",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 40],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 20],
                    [
                        "Soju Cocktails at $17.00", 40],
                    [
                        "4pcs Fried Chicken @ $8.00", 15],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
                    [
                        "12345678", 101], ]
            }, ]
        }
    });
});

我的问题是我无法深入工作。

我已遵循此处Highcharts xAxis drilldown dont change correctly的说明,但仍然无效。

有人可以指导我这件事吗?谢谢!

1 个答案:

答案 0 :(得分:1)

您需要添加drilldown.js参考

<script src="http://code.highcharts.com/modules/drilldown.js"></script>

JSFiddle demo