Highcharts两个系列,一个有下钻

时间:2014-01-29 17:07:32

标签: javascript jquery highcharts drilldown

我正在制作一个柱形图,其中有两个系列,我将其命名为提案和奖项。这些在财政年度显示,分为标准季度。因此,每个季度都有一个奖项栏和一个提案栏。我希望奖项系列深入分为几个类别。

在我的jsfiddle(http://jsfiddle.net/bqRF8/1/)中,我有:

    $('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category',
        categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 0,
        floating: true,
        borderWidth: 1,
        backgroundColor: '#FFFFFF',
        sshadow: true
    },

    series: [{
        name: 'Proposals',
        data: [{
            y: 2,
            drilldown: 'awards-q1'
        }, {
            y: 5
        }, {
            y: 3
        }, {
            y: 1
        }]
    }, {
        name: 'Awards',
        data: [{
            y: 7,
            drilldown: 'awards-q1'
        }, {
            y: 12,
            drilldown: 'awards-q2'
        }, {
            y:6,
            drilldown: 'awards-q3'
        }, {
            y: 3,
            drilldown: 'awards-q4'
        }]
    }],
    drilldown: {
        series: [{
            id: 'awards-q1',
            name: 'Awards for Quarter 1',
            data: [
                ['Research', 3],
                ['Conference', 0],
                ['Construction', 1],
                ['Education & Training', 0],
                ['Equipment', 1],
                ['Public Service', 0],
                ['Scholarships', 1],
                ['Scholarships & Fellowships', 1],
                ['Other', 0]
            ]
        }, {
            id: 'awards-q2',
            name: 'Awards for Quarter 2',
            data: [
                ['Research', 3],
                ['Conference', 0],
                ['Construction', 1],
                ['Education & Training', 0],
                ['Equipment', 1],
                ['Public Service', 0],
                ['Scholarships', 1],
                ['Scholarships & Fellowships', 1],
                ['Other', 0]
            ]
        }, {
            id: 'awards-q3',
            name: 'Awards for Quarter 3',
            data: [
                ['Research', 3],
                ['Conference', 0],
                ['Construction', 1],
                ['Education & Training', 0],
                ['Equipment', 1],
                ['Public Service', 0],
                ['Scholarships', 1],
                ['Scholarships & Fellowships', 1],
                ['Other', 0]
            ]
        }, {
            id: 'awards-q4',
            name: 'Awards for Quarter 4',
            data: [
                ['Research', 3],
                ['Conference', 0],
                ['Construction', 1],
                ['Education & Training', 0],
                ['Equipment', 1],
                ['Public Service', 0],
                ['Scholarships', 1],
                ['Scholarships & Fellowships', 1],
                ['Other', 0]
            ]
        }]
    }
})

现在,我有两个问题: 1.单击其中一个奖项列后,将显示除前四个类别之外的所有列,并且提案列仍然存在。 2.向下钻取后,单击按钮返回将永远不会将您带回原始图表。

0 个答案:

没有答案