如何从这个http://jsfiddle.net/highcharts/Vf3yT/(点击饼图)到这个http://jsfiddle.net/neFYY/(新的 3.0 Highcharts)实现那个“<返回”按钮?
Highcharts.setOptions({
lang: {
drillUpText: '◁ Back to {series.name}'
}
});
如何从这个http://jsfiddle.net/highcharts/Vf3yT/(点击饼图)到这个http://jsfiddle.net/neFYY/(新的 3.0 Highcharts)实现那个“<返回”按钮?
Highcharts.setOptions({
lang: {
drillUpText: '◁ Back to {series.name}'
}
});
让我们说清楚:
此示例: 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
}]
}]
我不确定问题出在哪里,添加按钮可以使用plugin
http://jsfiddle.net/Vf3yT/62
第一个示例的顶部图表与第二个小提琴相同。