簡體   English   中英

欄項目單擊事件上的Highchart

[英]Highchart on bar item click event

我有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 } }
    }]
});

上面的代碼引發錯誤,因為我可以在瀏覽器中看到空白屏幕

我認為您應該使用click事件,例如此處。 定義一個同時調用A和B的函數

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

我已經更新了您的示例。有很多錯誤

我進行了一些編輯,只是為了在單擊第一個圖表時顯示chart3。

這里

$(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] 
            }]
            });
        }
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM