条形项目点击事件的高图

时间:2014-06-09 11:59:33

标签: javascript jquery highcharts

我有2个不同的功能(功能A和B)。在条形项目上单击不能同时调用这两个函数

series: [{
        name: 'Chart 1',
        data: [{
            y: 1,
            name: 'apple'
        }, {
            y: 64,
            name: 'mango'
        }, {
            y: 89,
            name: 'banana'
        }],
        point: { events: { click: function A, function B } }
    }]
});

上面的代码抛出错误,因为我在浏览器上看到了空白屏幕

1 个答案:

答案 0 :(得分:2)

我认为你应该像这里一样使用click事件。 定义一个同时调用A和B

的函数
point: { events: { click: function (e) {
   A();B();
 }}

我已经更新了你的例子..有很多错误

我做了一些编辑,只是为了在点击第一张图表时显示图表。

here

$(function () {
var data = {
        animal: [2,3,1,6],                                                    
        vehicle: [03, 15, 14],
        fruits: [20,50 ,100]
    };
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            bar: {
                point: {
                    events: {
                        click:     function (e) {
   hideChart(e);Chart3(e);
 }
                    }
                }
            }
        },
        series: [
{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 34,
                name: 'vehicle'
            }, {
                y: 67,
                name: 'fruits'
            }]
        }]
    });
function hideChart(e) {

                    $("#container").toggle();
             }

    function Chart2(e) {

        var point = this;

        $("#detail").highcharts({
    chart: {
        type: 'column'
     },
plotOptions: {
            series: {

                point: {
                    events: {
                        click: function (e) {
   Chart3(e);
 }
                    }
                }
            }
        }, title: {
                text: point.name + ':' + point.y
            },

           series: [{
        name: 'series 2',
        colorByPoint: true,
                data: data[point.name]
            }]
        });
    }
function Chart3(e) { 
            var data = [[1, 9], [1],[4,6,7,2,9],[0,5,10],[3,7]];
            $("#sub_detail").highcharts({
                chart: {
                type: 'column',
                useHTML: true,

            },
            plotOptions: {
                series: {

                point: {
                events: {
                click: function() {
                            alert ('Category: ');
                        }
            }
                        },
                    allowPointSelect: true,
                            states: {
                                    select: {
                                        color: null,
                                        borderWidth:5,
                                        borderColor:'Blue'
                                    }
                                }
                    }
            }, 
            title: {
                text: this.x 
            },

            series: [{
                name: 'series 3',
                colorByPoint: true,
                data: data[this.x] 
            }]
            });
        }
});