从酒吧 - >饼图或栏 - >专栏进行高度图钻取 [英] Highcharts drilldown from bar-->pie or bar-->column

问题描述

我需要用饼图钻取创建条形图。在所有浏览器中一切正常，但

您是否需要更多解释？

 函数活动（params）{
 
 //来自统计控制器的params 
 var title_activities = params ['title_activities']，
 source_activities = params ['source_activities']，
 link_activities = params ['link_activities']，
 credits_databasis_str_activities = params ['credits_databasis_str_activities']，
 activities_category_names = params ['activities_category_names']，
 activities_category_data = params ['activities_category_data']，
 room_filter_name = params ['room_filter_name'] 
 
 var colors = Highcharts.getOptions（）。colors，
 categories = activities_category_names，
 name ='Activities'，
 data = activities_category_data 
 
函数setChart（图表，选项）{
 chart.series [0]卸下摆臂（假）; 
 chart.xAxis [0] .setCategories（options.categories，false）; 
 chart.addSeries（{
 type：options.type，
 name：options.name，
 data：options.data，
 color：options.color ||颜色[0] 
}，false）; 
 
 //chart.options.spacingRight = 35; //不工作
 //chart.yAxis.title =测试; //不工作
 chart.redraw（）; 
 
 
 var chart = new Highcharts.Chart（{
图表：{
 renderTo：'activities_chart'，
 type：'bar'，
 spacingRight：15 
 // spacingLeft：15 
}，
 title：{
 text：title_activities 
}，
副标题：{
 text：'当前房间：'+ room_filter_name 
}，
学分：{
 text：Databasis：+ credits_databasis_str_activities +families+| Source：+ source_activities，
 href：link_activities 
}，
 xAxis：{
类别：类别
}，
 yAxis：{
 title：{
 text：null 
}，
 max：100 
}，
 plotOptions：{
 bar：{
 cursor：'pointer'，
 point：{
 events：{
 click：function（）{
 var drilldown = this.drilldown; 
 var options; 
 if（drilldown）{//向下钻取
 
 this.series.chart.setTitle（{
 text：Activities  - + drilldown.name 
}） ; 
 $ b选项= {
'名称'：drilldown.name，
'categories'：drilldown.categories，
'data'：drilldown.data，
'type'：'pie'
}; 
} else {//恢复
 
 this.series.chart.setTitle（{
 text：Activities
}）; 
 options = {
'name'：name，
'categories'：categories，
'data'：data，
'type'：'bar'
}; 
} 
 setChart（this.series.chart，options）; 
} 
} 
} 
}，
 pie：{
 cursor：'pointer'，
 point：{
 events ：{
 click：function（）{
 var drilldown = this.drilldown; 
 var options; 
 if（drilldown）{//向下钻取
 
 this.series.chart.setTitle（{
 text：Activities  - + drilldown.name 
}） ; 
 $ b选项= {
'名称'：drilldown.name，
'categories'：drilldown.categories，
'data'：drilldown.data，
'type'：'pie'
}; 
} else {//恢复
 
 this.series.chart.setTitle（{
 text：Activities
}）; 
 options = {
'name'：name，
'categories'：categories，
'data'：data，
'type'：'bar'
}; 
} 
 setChart（this.series.chart，options）; 
} 
 
}，
 dataLabels：{
 enabled：true，
 color：colors [0]，
 connectorColor：colors [ 0]，
 distance：15，
 formatter：function（）{
 var label_String = this.point.name; 
 
 if（label_String.length> 16）{
 label_String = label_String.substring（0,16）+...
}; 
 
 return'< b>'+ label_String +'< / b>：'+ this.y; 
} 
} 
} 
}，
 tooltip：{
 formatter：function（）{
 var point = this.point，
s =
 
 if（point.drilldown）{
s + = this.x +'：< b>'+ this.y +'％of families< / b> ;<峰; br />'; 
 s + ='点击查看'+ point.category +'details'; 
} else {
 s + = point.name +'：< b>'this.y +'times selected< / b>< br />'; 
 s + ='点击返回活动概览'; 
} 
 return s; 
} 
}，
系列：[{
 type：'bar'，
 name：name，
 data：data 
}] ，
导出：{
启用：false 
} 
}）; 
 
 
  

解决方案

在高图表中是错误的。我在3.0.1上运行导致了错误，他们在2天前切换到3.0.2，问题得到解决。

对于任何对钻取操作感兴趣的人从酒吧到派对的下降图...在这里您可以找到示例。

以下是代码：

HTML：

 < script src =http://code.highcharts.com/3.0.2/highcharts.js>< / script> 
< div id =activities_chartstyle =width：100％; height：340px;>< / div> 
  

JS：

  $（function（）{
 
 var title_activities =Activities，
 source_activities =My source，
 link_activities =http：// www。 highcharts.com，
 credits_databasis_str_activities =215，
 activities_category_names = [eat，read，internet in surf]，
 activities_category_data = [{y：66.15， ：[名称：吃 - 多久？，数据：[[每天1次，21]，[每天3次，45]，[每天2次，27]，[每周2次，3]，[每周≥3次，5次，[少，4次]，[隔周，3次]，[每周1次，7]， [未指定，6]，[每月一次，6]]}}，{y：67.71，深入：{名称：读 - 多少时间？，数据：[[每天2小时 ，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时，每周1小时， ，10]，[每周3小时，4]，[每天≥3小时，5]，[未指定，7]]}}，{y：59.38，深入：{名称：在互联网 - 多少时间？，数据：[[每天2小时，31，[每周1小时，1]，[每周2小时，2]，[每天1小时，37]，[每天1/2小时，20]，[≥每天3小时，13]，[不常用，3]，[未指定，5]，[每周3小时，2]]}}，
 room_filter_name =起居室 
 
 var colors = Highcharts.getOptions（）。colors，
 categories = activities_category_names，
 name ='Activities'，
 data = activities_category_data 
 
函数setChart（图表，选项）{
 
 var max = chart.series.length; 
 for（var i = 0; i  chart.series [0] .remove（false）; 
} 
 
 chart.xAxis [0] .setCategories（options.categories，false）; 
 
 chart.addSeries（{
类型：o​​ptions.type，
名称：options.name，
 data：options.data，
 color：colors [0] 
}，false）; 
 
 chart.redraw（）; 
 
 
 var chart = new Highcharts.Chart（{
图表：{
 renderTo：'activities_chart'，
 type：'bar'，
 spacingRight：15 
}，
 title：{
 text：title_activities 
}，
字幕：{
 text：'当前房间：' + room_filter_name 
}，
 credits：{
 text：Databasis：+ credits_databasis_str_activities +families+| Source：+ source_activities，
 href：link_activities 
 $，
 xAxis：{
类别：类别
}，
 yAxis：{
 title：{$ b $ text：null 
}， 
 max：100 
}，
 plotOptions：{
 bar：{
 cursor：'pointer'，
 point：{
 events： {
点击：function（）{
 var drilldown = this.drilldown; 
 
 this.series.chart.setTitle（{
 text：Activities  - + drilldown.name 
}）; 
 
 var options = {
'name'：drilldown.name，
'categories'：drilldown.categories，
'data'：drilldown.data，
'type'：'pie'
}; 
 
 setChart（this.series.chart，options）; 
} 
} 
} 
}，
 pie：{
 cursor：'pointer'，
 point：{
 events ：{
 click：function（）{
 this.series.chart.setTitle（{
 text：Activities
}）; 
 var options = {
'name'：name，
'categories'：categories，
'data'：data，
'type'：'bar'
}; 
 
 setChart（this.series.chart，options）; 
} 
 
}，
 dataLabels：{
 enabled：true，
 color：colors [0]，
 connectorColor：colors [ 0]，
 distance：15，
 formatter：function（）{
 var label_String = this.point.name; 
 
 if（label_String.length> 16）{
 label_String = label_String.substring（0,16）+...
}; 
 
 return'< b>'+ label_String +'< / b>：'+ this.y; 
} 
} 
} 
}，
 tooltip：{
 formatter：function（）{
 var point = this.point，
s =
 
 if（point.drilldown）{
s + = this.x +'：< b>'+ this.y +'％of families< / b> ;<峰; br />'; 
 s + ='点击查看'+ point.category +'details'; 
} else {
 s + = point.name +'：< b>'this.y +'times selected< / b>< br />'; 
 s + ='点击返回活动概览'; 
} 
 return s; 
} 
}，
系列：[{
 type：'bar'，
 name：name，
 data：data 
}] ，
导出：{
启用：false 
} 
}）
}）; //结束
  

I need to create a bar-chart with a pie-chart drill down. Everything works fine in all browsers but

Do you need more explanations?

    function activities(params) {

    //params coming from statistics controller
    var title_activities = params['title_activities'],
        source_activities = params['source_activities'],
        link_activities = params['link_activities'],
        credits_databasis_str_activities = params['credits_databasis_str_activities'],
        activities_category_names = params['activities_category_names'],
        activities_category_data = params['activities_category_data'],
        room_filter_name = params['room_filter_name']

    var colors = Highcharts.getOptions().colors,
            categories = activities_category_names,
            name = 'Activities',
            data = activities_category_data

        function setChart(chart, options) {
            chart.series[0].remove(false);
            chart.xAxis[0].setCategories(options.categories, false);
            chart.addSeries({
                type: options.type,
                name: options.name,
                data: options.data,
                color: options.color || colors[0]
            }, false);

            //chart.options.spacingRight = 35; //not working
            //chart.yAxis.title = "Test"; //not working
            chart.redraw();
        }

        var chart = new Highcharts.Chart({
            chart: {
              renderTo: 'activities_chart',
              type: 'bar',
              spacingRight: 15
              //spacingLeft: 15
            },
            title: {
                text: title_activities
            },
            subtitle: {
                text: 'Current room: ' + room_filter_name
            },
            credits: {
                text: "Databasis: " + credits_databasis_str_activities + " households" + "    |    Source: " + source_activities,
                href: link_activities
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: null
                },
                max: 100
            },
            plotOptions: {
                bar: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                var options;
                                if (drilldown) { // drill down

                                    this.series.chart.setTitle({
                                       text: "Activities - " + drilldown.name
                                   });

                                    options = {
                                        'name': drilldown.name,
                                        'categories': drilldown.categories,
                                        'data': drilldown.data,
                                        'type': 'pie'
                                    };
                                } else { // restore

                                  this.series.chart.setTitle({
                                       text: "Activities"
                                   });
                                    options = {
                                        'name': name,
                                        'categories': categories,
                                        'data': data,
                                        'type': 'bar'
                                    };
                                }
                                setChart(this.series.chart, options);
                            }
                        }
                    }
                },
                pie: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                var options;
                                if (drilldown) { // drill down

                                    this.series.chart.setTitle({
                                       text: "Activities - " + drilldown.name
                                   });

                                    options = {
                                        'name': drilldown.name,
                                        'categories': drilldown.categories,
                                        'data': drilldown.data,
                                        'type': 'pie'
                                    };
                                } else { // restore

                                  this.series.chart.setTitle({
                                       text: "Activities"
                                   });
                                    options = {
                                        'name': name,
                                        'categories': categories,
                                        'data': data,
                                        'type': 'bar'
                                    };
                                }
                                setChart(this.series.chart, options);
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        connectorColor: colors[0],
                        distance: 15,
                        formatter: function() {
                            var label_String = this.point.name;

                            if (label_String.length > 16) {
                              label_String = label_String.substring(0,16) + "..."
                            };

                            return '<b>'+ label_String +'</b>: '+ this.y;
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = ""

                    if (point.drilldown) {
                        s += this.x +':<b>'+ this.y +' % of households</b><br/>';
                        s += 'Click to view '+ point.category +' details';
                    } else {
                        s += point.name +':<b>'+ this.y +' times chosen</b><br/>';
                        s += 'Click to return to activities overview';
                    }
                    return s;
                }
            },
            series: [{
                type: 'bar',
                name: name,
                data: data
            }],
            exporting: {
                enabled: false
            }
        });

  }

解决方案

The problem was an error in high charts. I was running on 3.0.1 which caused the error, they switched to 3.0.2 2 days ago and the problem is fixed.

For anybody who is interested in a drill down-chart from bar to pie...here you can find the example.

And here is the code:

HTML:

<script src="http://code.highcharts.com/3.0.2/highcharts.js"></script>
<div id="activities_chart" style="width: 100%; height: 340px;"></div>

JS:

$(function () {

var title_activities = "Activities",
    source_activities = "My source",
    link_activities = "http://www.highcharts.com",
    credits_databasis_str_activities = "215",
    activities_category_names = ["eat", "read", "surf in internet"],
    activities_category_data = [{y:66.15, drilldown:{name:"eat - How often?", data:[["1 time per day", 21], ["3 times per day", 45], ["2 times per day", 27], ["2 times a week", 3], ["≥ 3 times a week", 5], ["less", 4], ["every other week", 3], ["1 times a week", 7], ["not specified", 6], ["once a month", 6]]}}, {y:67.71, drilldown:{name:"read - How much time?", data:[["2h per day", 11], ["1h per day", 41], ["less often", 6], ["2h per week", 8], ["1/2h per day", 38], ["1h per week", 10], ["3h per week", 4], ["≥ 3h per day", 5], ["not specified", 7]]}}, {y:59.38, drilldown:{name:"surf in internet - How much time?", data:[["2h per day", 31], ["1h per week", 1], ["2h per week", 2], ["1h per day", 37], ["1/2h per day", 20], ["≥ 3h per day", 13], ["less often", 3], ["not specified", 5], ["3h per week", 2]]}}],
    room_filter_name = "Living Room"

var colors = Highcharts.getOptions().colors,
        categories = activities_category_names,
        name = 'Activities',
        data = activities_category_data

function setChart(chart, options) {

        var max = chart.series.length;
        for (var i = 0; i < max; i++) {
          chart.series[0].remove(false);
        }

        chart.xAxis[0].setCategories(options.categories, false);

        chart.addSeries({
            type: options.type,
            name: options.name,
            data: options.data,
            color: colors[0]
        }, false);

        chart.redraw();
    }

    var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'activities_chart',
          type: 'bar',
          spacingRight: 15
        },
        title: {
            text: title_activities
        },
        subtitle: {
            text: 'Current room: ' + room_filter_name
        },
        credits: {
            text: "Databasis: " + credits_databasis_str_activities + " households" + "    |    Source: " + source_activities,
            href: link_activities
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: null
            },
            max: 100
        },
        plotOptions: {
            bar: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            var drilldown = this.drilldown;

                            this.series.chart.setTitle({
                                   text: "Activities - " + drilldown.name
                            });

                            var options = {
                                'name': drilldown.name,
                                'categories': drilldown.categories,
                                'data': drilldown.data,
                                'type': 'pie'
                            };

                            setChart(this.series.chart, options);
                        }
                    }
                }
            },
            pie: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                          this.series.chart.setTitle({
                               text: "Activities"
                           });
                          var options = {
                                'name': name,
                                'categories': categories,
                                'data': data,
                                'type': 'bar'
                            };

                            setChart(this.series.chart, options);
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    connectorColor: colors[0],
                    distance: 15,
                    formatter: function() {
                        var label_String = this.point.name;

                        if (label_String.length > 16) {
                          label_String = label_String.substring(0,16) + "..."
                        };

                        return '<b>'+ label_String +'</b>: '+ this.y;
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = ""

                if (point.drilldown) {
                    s += this.x +':<b>'+ this.y +' % of households</b><br/>';
                    s += 'Click to view '+ point.category +' details';
                } else {
                    s += point.name +':<b>'+ this.y +' times chosen</b><br/>';
                    s += 'Click to return to activities overview';
                }
                return s;
            }
        },
        series: [{
            type: 'bar',
            name: name,
            data: data
        }],
        exporting: {
            enabled: false
        }
    })
}); //end

这篇关于从酒吧 - >饼图或栏 - >专栏进行高度图钻取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！