1

我正在尝试使用原型适配器在 extjs 选项卡内呈现 3 个高图。我在一个页面中呈现多个条形图，所有条形图上都有点击事件。在第一个条形图下方呈现的所有图表都没有获得我为它们注册的点击事件。页面上的第一个图表包含所有点击事件。但是即使我为它们添加了点击事件，下面的所有图表都不能点击。当我在 extjs 组件之外呈现同一页面时，所有图表和所有点击都可以正常工作。我猜highcharts和extjs有冲突。

能够在 jsfiddle http://jsfiddle.net/kNPeg/4/中复制该问题

以下是我创建 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
                                }
                            }
                        }

                });
4

1 回答 1

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');
            });
        }
于 2013-05-23T15:54:30.967 回答