自己写的highcharts级联(点击事件)

$.fn.extend({
    Zhu: function (option) {
        var id = $(this).attr("id");
        $('#' + id).highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: option.title
            },
            xAxis: {
                categories: option.cate,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: option.ytext
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} ' + option.unit + '</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: option.series
        });
    },
    Pie: function (option) {
        var id = $(this).attr("id");
        $('#' + id).highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: option.title
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: option.name,
                data: option.series
            }]
        })
    },
    BarPlus: function (option) {
        var id = $(this).attr("id");
        $('#' + id).highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: option.title
            },
            xAxis: {
                categories: option.cate
            },
            yAxis: {
                min: 0,
                title: {
                    text: option.ytext
                }
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            series: option.series
        });
    },
    PieCol: function (option) {
        var id = $(this).attr("id");
        $('<div class="chart1" id="' + id + '1">')
                .appendTo('#' + id)
                .highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: option.title
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: option.name,
                        data: option.series,
                        events: {
                            click: function (event) {
                                $.post(option.url, { pKey: event.point.name, begin: $("#dtpBegin").val(), end: $("#dtpEnd").val(), brand: $("#brand").val() }, function (e) {
                                    var obj = eval('(' + e + ')');
                                    $('#' + id + "2").highcharts({
                                        chart: {
                                            type: 'column'
                                        },
                                        title: {
                                            text: event.point.name
                                        },
                                        xAxis: {
                                            categories: [event.point.name],
                                            visible: false
                                        },
                                        yAxis: {
                                            min: 0,
                                            title: {
                                                text: ''
                                            },
                                            visible: false
                                        },
                                        tooltip: {
                                            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                                            shared: true
                                        },
                                        plotOptions: {
                                            column: {
                                                stacking: 'percent'
                                            }
                                        },
                                        series: obj
                                    });
                                })
                            }
                        }
                    }]
                });
        $('<div class="chart2" id="' + id + '2">').appendTo('#' + id);
    },
    PiePie: function (option) {
        var id = $(this).attr("id");
        $('<div class="chart3" id="' + id + '1">')
                .appendTo('#' + id)
                .highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: option.title
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: option.name,
                        data: option.series,
                        events: {
                            click: function (event) {
                                $.post(option.url, { pKey: event.point.name, begin: $("#dtpBegin").val(), end: $("#dtpEnd").val(), brand: $("#brand").val() }, function (e) {
                                    var obj = eval('(' + e + ')');
                                    $('#' + id + "2").highcharts({
                                        chart: {
                                            plotBackgroundColor: null,
                                            plotBorderWidth: null,
                                            plotShadow: false
                                        },
                                        title: {
                                            text: event.point.name
                                        },
                                        tooltip: {
                                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                        },
                                        plotOptions: {
                                            pie: {
                                                allowPointSelect: true,
                                                cursor: 'pointer',
                                                dataLabels: {
                                                    enabled: false
                                                },
                                                showInLegend: true
                                            }
                                        },
                                        series: [{
                                            type: 'pie',
                                            name: '占比',
                                            data: obj,
                                            events: {
                                                click: function (event) {
                                                    if (cb1 != null && cb1 != undefined) {
                                                        cb1(event);
                                                    }
                                                }
                                            }
                                        }]
                                    });
                                })
                            }
                        }
                    }]
                });
        $('<div class="chart4" id="' + id + '2">').appendTo('#' + id);
    },
    BarLeft: function (option) {
        var id = $(this).attr("id");
        var cate = ['描述相符', '服务态度', '物流服务'];
        $('#' + id).highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: option.title
            },
            xAxis: [{
                categories: cate,
                reversed: false,
                labels: {
                    step: 1
                }
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: cate,
                linkedTo: 0,
                labels: {
                    step: 1
                }
            }],
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
                min: -10,
                max: 10
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + ', ' + this.point.category + '</b><br/>' +
                        '数量: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            },
            series: [{
                name: '低于4.7(不含)店铺',
                data: option.series1,
                events: {
                    click: function (event) {
                        if (cb2 != null && cb2 != undefined) {
                            cb2(event, this);
                        }
                    }
                }
            }, {
                name: '高于4.9(不含)店铺',
                data: option.series2,
                events: {
                    click: function (event) {
                        if (cb2 != null && cb2 != undefined) {
                            cb2(event, this);
                        }
                    }
                }
            }]
        });
    }
})
var cb1, cb2;