Highcharts与extjs冲突

我正在尝试使用prototype adapter在extjs选项卡中呈现3个highcharts。我在一个页面中呈现多个条形图，所有条形图上都有单击事件。所有呈现在第一个条形图下方的图表都不会获得我为其注册的单击事件。页面上的第一个图表包含所有单击事件。但是下面的所有图表都不能点击，即使我已经为它们添加了点击事件。当我在extjs组件外部呈现同一页面时，所有图表和所有单击都可以正常工作。我猜这与highcharts和extjs有冲突

能够在jsfilddle中复制该问题

下面是我创建extjs组件的javascript代码，在该组件中，同一个highchart被渲染了3次，但底部的图表具有不可单击的条形图

            var centerTabPanel = new Ext.TabPanel({
                       region:'center',
                       margins: '0 10 0 0',
                       id:'center-panel',           
                       activeTab:0,
                       bodyStyle:'padding: 8 5 5 8;',
                       autoScroll: true,
               items:[  {
                                        contentEl: 'db_snapshots',
                                        title: "Charts",
                                        autoScroll: true,
                                        bodyStyle: 'background:#fffff0;padding: 8 5 5 8;'
                                    }
                        ]
                    });  


                    var viewport = new Ext.Viewport({
                        layout:'border',
                                    loadMask : {msg:"testLoading..."},
                                    monitorResize : true,
                        items:[


                            centerTabPanel
                                    ]
                    });
                            viewport.doLayout();


            var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: "container",
                        defaultSeriesType: 'column',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false

                    },
                        title: {
                            text: null
                        },
                        xAxis: {
                            categories: ['First','Second','Third']
                        },

                        series: [{
                            name:"Values",
                            data: [133, 156, 947]
                        }],
                        plotOptions: {
                            series: {
                                animation: false,
                                cursor: 'text',
                                point: {
                                    events: {
                                        click: function() {
                                            alert("hello");
                                        }
                                    }
                                },
                                marker: {
                                    lineWidth: 1
                                }
                            },
                            line: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                }
                            },
                            bar: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'String',
                                dataLabels: {
                                    enabled: false
                                }
                            }
                        }

                });



                 var chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: "container2",
                        defaultSeriesType: 'column',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false

                    },
                        title: {
                            text: null
                        },
                        xAxis: {
                            categories: ['First','Second','Third']
                        },

                        series: [{
                            name:"Values",
                            data: [133, 156, 947]
                        }],
                        plotOptions: {
                            series: {
                                animation: false,
                                cursor: 'text',
                                point: {
                                    events: {
                                        click: function() {
                                            alert("hello");
                                        }
                                    }
                                },
                                marker: {
                                    lineWidth: 1
                                }
                            },
                            line: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                }
                            },
                            bar: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'String',
                                dataLabels: {
                                    enabled: false
                                }
                            }
                        }

                });

                var chart3 = new Highcharts.Chart({
                    chart: {
                        renderTo: "container3",
                        defaultSeriesType: 'column',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false

                    },
                        title: {
                            text: null
                        },
                        xAxis: {
                            categories: ['First','Second','Third']
                        },

                        series: [{
                            name:"Values",
                            data: [133, 156, 947]
                        }],
                        plotOptions: {
                            series: {
                                animation: false,
                                cursor: 'text',
                                point: {
                                    events: {
                                        click: function() {
                                            alert("hello");
                                        }
                                    }
                                },
                                marker: {
                                    lineWidth: 1
                                }
                            },
                            line: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                }
                            },
                            bar: {
                                size:'100%',
                                allowPointSelect: true,
                                cursor: 'String',
                                dataLabels: {
                                    enabled: false
                                }
                            }
                        }

                });

---

您可以使用变通方法，对每个系列元素（在每个图表中）进行迭代，并通过“on”触发器向SVG元素添加操作，而不是设置点击点

for（var i=0；i

感谢您的快速回复。

 for (var i = 0; i < chart3.series[0].data.length; i++) {
            chart3.series[0].data[i].graphic.on('click', function () {
                alert('aaa3');
            });
        }