3

如何从这个http://jsfiddle.net/highcharts/Vf3yT/(点击饼图)到这个http://jsfiddle.net/neFYY/(新的 3.0 Highcharts)实现那个“<返回”按钮?

Highcharts.setOptions({
    lang: {
        drillUpText: '◁ Back to {series.name}'
    }
});
4

2 回答 2

3

让我们说清楚:

  • 此示例: http: //jsfiddle.net/neFYY/2/不是插件,它只是简单的 Highcharts 图表,通过一些点击绑定使其表现得像下钻。

  • 这个例子: http: //jsfiddle.net/highcharts/Vf3yT/ IS插件,它需要一些特定的结构才能使其工作(见:drilldown对象)

因此,如果您想在第一个图表中使用插件,您需要为该插件传递正确的结构,即:

drilldown: {
    activeAxisLabelStyle: {
        cursor: 'pointer',
        color: '#039',
        fontWeight: 'bold',
        textDecoration: 'underline'            
    },
    activeDataLabelStyle: {
        cursor: 'pointer',
        color: '#039',
        fontWeight: 'bold',
        textDecoration: 'underline'            
    },
    animation: {
        duration: 500
    },
    series: [{
        id: 'fruits',
        name: 'Fruits',
        data: [
            ['Apples', 4],
            ['Pears', 6],
            ['Oranges', 2],
            ['Grapes', 8]
        ]
    }, {
        id: 'cars',
        name: 'Cars',
        data: [{
            name: 'Toyota', 
            y: 4,
            drilldown: 'toyota'
        },
        ['Volkswagen', 3],
        ['Opel', 5]
        ]
    }, {
        id: 'toyota',
        name: 'Toyota',
        data: [
            ['RAV4', 3],
            ['Corolla', 1],
            ['Carina', 4],
            ['Land Cruiser', 5]
        ]
    }]
},

和系列:

series: [{
    name: 'Overview',
    colorByPoint: true,
    data: [{
        name: 'Fruits',
        y: 10,
        drilldown: 'fruits'
    }, {
        name: 'Cars',
        y: 12,
        drilldown: 'cars'
    }, {
        name: 'Countries',
        y: 8
    }]
}]
于 2013-06-06T13:41:09.537 回答
1

我不确定问题出在哪里,添加按钮可以使用plugin http://jsfiddle.net/Vf3yT/62

第一个示例的顶部图表与第二个小提琴相同。

于 2013-06-05T15:02:21.443 回答