Highcharts与extjs冲突

Question

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

之所以能够复制问题jsfilddle http://jsfiddle.net/kNPeg/4/

以下是我在哪里创建ExtJS的部件，其中相同highchart呈现3次，但底部的图表中的javascript代码有没有点击吧。

  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 
           } 
          } 
         } 

       }); 

Answer 1

，而不是设置点的点击，你可以使用的解决方法，并遍历每个系列元素（每个排行榜中）上，并通过“关于”触发加行动，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'); 
      }); 
     }