Highcharts与extjs发生冲突

时间:2013-05-22 10:12:51

标签: highcharts

我正在尝试使用原型适配器在extjs选项卡中渲染3个高图。我在一个页面中渲染多个条形图,所有条形图都在条形图上。在第一个条形图下方呈现的所有图表都不会获得我为其注册的点击事件。页面上的第一个图表包含所有点击事件。但即使我为他们添加了点击事件,下面的所有图表都无法点击。当我在extjs组件外部渲染同一页面时,所有图表和所有点击都可以正常工作。我猜测与highcharts和extjs存在冲突。

能够在jsfilddle http://jsfiddle.net/kNPeg/4/

中复制该问题

以下是我在创建extjs组件的javascript代码,其中相同的高图被渲染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
                                }
                            }
                        }

                });

1 个答案:

答案 0 :(得分:0)

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

http://jsfiddle.net/kNPeg/5/

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