相邻图表中是否可以进行多级Highchart Drilldown?

时间:2014-06-12 11:08:53

标签: javascript jquery charts highcharts

我是高中新手。我在下钻时遇到的问题很少。

在下钻时,相同的图表会被替换。我们能否给钻出的新图表提供特定的空间(如果我说新的div)?如何在不同的图表中添加更多级别的向下钻取?

默认情况下,如果图例中有更多系列,则单击其中一个系列将添加/删除该系列。我们是否可以使系列仍然可见并添加新图表?

2 个答案:

答案 0 :(得分:9)

查看http://jsfiddle.net/6LXVQ/97/的3级示例

    series: [{
        id: 'toplevel',
        name: 'Animals',
        data: [
            {name: 'Cats', y: 4, drilldown: 'level1'},
            {name: 'Dogs', y: 2},
            {name: 'Cows', y: 1},
            {name: 'Sheep',y: 2},
            {name: 'Pigs', y: 1}
        ]
    }],
    drilldown: {
        series: [ { 
            id:'level1',
            name: 'Level 1',
            data: [
                {name: 'Trees', y: 1},
                {name: 'Plants', y: 2},
                {name: 'Grass', y: 3},
                {name: 'Deeper', y: 4, drilldown: 'level2'}
            ] 
        },{                
            id:'level2',
            name: 'Level 2',
            data: [
                {name: 'Green', y:1},
                {name: 'Red', y:2},
                {name: 'Blue', y:3},
                {name: 'Deeper', y: 4, drilldown: 'level3'}
            ] 
        },{
            id: 'level3',
            name: 'Level 3',
            data: [
                {name:'Yes', y:1},
                {name:'it',y:2},
                {name:'works', y:3}
            ]
        }]
    }

答案 1 :(得分:4)

目前有2/3级可用。请参阅示例:http://jsfiddle.net/6LXVQ/1/

series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            name: 'Animals',
            data: [
                {name: 'Cats', 
                 y: 4,
                 drilldown: 'cats'},
                ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {

            id:'cats',
            data: [1,2,3] 
        }]
    }