プロトタイプ アダプターを使用して、extjs タブ内で 3 つのハイチャートをレンダリングしようとしています。1 つのページに複数の棒グラフをレンダリングしており、すべてのバーにクリック イベントがあります。最初の棒グラフの下に表示されるすべてのグラフは、登録したクリック イベントを取得しません。ページの最初のグラフには、すべてのクリック イベントがあります。しかし、クリックイベントを追加したにもかかわらず、以下のすべてのチャートはクリック可能ではありません。extjs コンポーネントの外側で同じページをレンダリングすると、すべてのチャートとすべてのクリックが正常に機能します。ハイチャートとextjsとの競合があると思います。
jsfilddle http://jsfiddle.net/kNPeg/4/で問題を再現できました
以下は、同じハイチャートが 3 回レンダリングされる extjs コンポーネントを作成している 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
}
}
}
});