我正在尝试使用原型适配器在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
}
}
}
});
答案 0 :(得分:0)
您可以使用变通方法,迭代每个系列元素(在每个图表中),并通过“on”触发器向SVG元素添加操作,而不是设置点击。
for (var i = 0; i < chart3.series[0].data.length; i++) {
chart3.series[0].data[i].graphic.on('click', function () {
alert('aaa3');
});
}