Highcharts，当钻时添加“返回”（钻取）按钮 [英] Highcharts, add 'go back' (drill up) button when drill

问题描述

如何实现'<返回'按钮从这个 http://jsfiddle.net/highcharts/Vf3yT/ （点击饼图）到这个 http://jsfiddle.net/neFYY/ （new 3.0 Highcharts）？

  Highcharts.setOptions（{
 lang：{
 drillUpText：'◁返回{series.name}'
} 
}）; 
  

解决方案

让我们清楚：

• 这个例子： http：// jsfiddle.net/neFYY/2/ 不是插件，它只是简单的Highcharts图表，带有一些点击绑定，使其表现得像钻取一样。




• 这个例子： http://jsfiddle.net/highcharts/Vf3yT/ 是插件，它需要一些（请参阅： drilldown object）

<因此，如果你想使用第一个图表的插件，你需要传递适当的结构，这是：

 钻取：{
 activeAxisLabelStyle：{
 cursor：'pointer'，
 color：'＃039'，
 fontWeight：'bold'，
 textDecoration：'underline' 
}，
 activeDataLabelStyle：{
光标：'指针'，
颜色：'＃039'，
 fontWeight：'bold'，
 textDecoration：'underline'
}，
动画： {
持续时间：500 
}，
系列：[{
 id：'fruits'，
 name：'Fruits'，
 data：[
 ['Apples'，4]，
 ['Pears'，6]，
 ['Oranges'，2]，
 ['Grapes'，8] 
 ] 
}，{
 id：'cars'，
 name：'Cars'，
 data：[{
 name：'Toyota'，
y ：4，
钻取：'toyota'
}，
 ['Volkswagen'，3]，
 ['Opel'，5] 
] 
 }，{
 id：'toyota'，
 name：'Toyota'，
 data：[
 ['RAV4'，3]，
''Corolla' ，1]，
 ['Carina'，4]，
 ['Land Cruiser'，5] 
] 
}] 
}，
  

和系列：

 系列：[{
名称：'概览'，
 colorByPoint ：true，
 data：[{
 name：'Fruits'，
y：10，
 drilldown：'fruits'
}，{
 name： 'cars'，
y：12，
 drilldown：'cars'
}，{
 name：'Countries'，
y：8 
}] 
}] 
  

How to implement that '< Go back' button from this http://jsfiddle.net/highcharts/Vf3yT/ (click on pie) to this http://jsfiddle.net/neFYY/ (new 3.0 Highcharts) ?

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

解决方案

Let's make it clear:

• this example: http://jsfiddle.net/neFYY/2/ IS NOT plugin, it's just simple Highcharts chart, with some click binds to make it behave like drilldown.

• this example: http://jsfiddle.net/highcharts/Vf3yT/ IS plugin, which requires some specific structure to make it work (see: drilldown object)

So if you want to use plugin with first chart, you need to pass proper structure for that plugin, which is:

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]
        ]
    }]
},

And series:

series: [{
    name: 'Overview',
    colorByPoint: true,
    data: [{
        name: 'Fruits',
        y: 10,
        drilldown: 'fruits'
    }, {
        name: 'Cars',
        y: 12,
        drilldown: 'cars'
    }, {
        name: 'Countries',
        y: 8
    }]
}]

这篇关于Highcharts，当钻时添加“返回”（钻取）按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！