この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/プラグインではありません。単純なハイチャート チャートであり、ドリルダウンのように動作させるためのクリック バインドがいくつかあります。
この例: 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を使用できます
最初の例のトップ チャートは、2 番目のフィドルと同じです。