5
के एक भाग को हाइलाइट करें extjs 4.1.1a कोड में एक पंक्ति चार्ट का एक कार्य उदाहरण है। अब मुझे उस चार्ट के एक हिस्से को किसी दिए गए न्यूनतम और अधिकतम टाइमस्टैम्प पर हाइलाइट करने की आवश्यकता है।extjs4 लाइन चार्ट
{'xtype' : 'chart',
'store' : 'ChartData',
'height' : '100%',
'width' : '100%',
'legend' : {'position' : top},
'axes': [{
'title': 'Power',
'type': 'Numeric',
'position': 'left',
'fields': ['power']
},{
'title': 'Timestamp',
'type': 'Numeric',
'position': 'bottom',
'fields': ['timestamp'],
'minorTickSteps': 3
}],
'series': [{
'type': 'line',
'fill': true,
'axis' : 'left',
'xField': 'timestamp',
'yField': 'power'
}]}
मैंने सेन्चा मंच की खोज की है और विशेष रूप से कुछ भी नहीं मिला जो मेरी आवश्यकताओं को पूरा करता है। अभी के लिए मैं एक कस्टम रेंडरर के साथ लाइन चार्ट पर बिंदुओं का रंग बदलने में कामयाब रहा।
'renderer': function(sprite, record, attr, index, store) {
var item = store.getAt(index);
if(item != undefined && (item.get('timestamp') < startdate || item.get('timestamp') > enddate)){
return Ext.apply(attr, {'fill': '#00cc00', 'stroke-width': 3, 'radius': 4});
}else{
return Ext.apply(attr, {'fill': '#ff0000', 'stroke-width': 3, 'radius': 4});
}}
लेकिन मुझे लाइन के नीचे रंग बदलने का कोई तरीका नहीं मिला है। उस पर कोई सुझाव?
अद्यतन - कार्य ठीक अब
मैं एक समाधान कोलंबो द्वारा दिए गए उत्तर के आधार पर लागू करते हैं।
doCustomDrawing: function() {: function (p){
var me = this, chart = me.chart;
if(chart.rendered){
var series = chart.series.items[0];
if (me.groupChain != null) {
me.groupChain.destroy();
me.groupChain = null;
}
me.groupChain = Ext.create('Ext.draw.CompositeSprite', {
surface: chart.surface
});
if(series != null && series.items != null){
var surface = chart.surface;
var pathV = 'M';
var first = true;
// need first and last x cooridnate
var mX = 0,hX = 0;
Ext.each(series.items, function(item){
var storeItem = item.storeItem,
pointX = item.point[0],
pointY = item.point[1];
// based on given startdate and enddate start collection path coordinates
if(!(storeItem.get('timestamp') < startdate || storeItem.get('timestamp') > enddate)){
if(hX<pointX){
hX = pointX;
}
if(first){
first = false;
mX = pointX;
pathV+= + pointX + ' ' + pointY;
}else{
pathV+= ' L' + pointX + ' ' + pointY;
}
}
});
var sprite = Ext.create('Ext.draw.Sprite', {
type: 'path',
fill: '#f00',
surface: surface,
// to draw a sprite with the area below the line we need the y coordinate of the x axe which is in my case items[1]
path : pathV + ' L'+ hX + ' ' + chart.axes.items[1].y + ' L'+ mX + ' ' + chart.axes.items[1].y + 'z'
});
me.groupChain.add(sprite);
me.groupChain.show(true);
}
}}
यह वास्तव में अच्छा लग रहा है और प्रभाव मैं मामले में और के लिए उम्मीद थी है आप कंटेनर नई स्प्राइट चार्ट से साफ कर दिया है का आकार बदलें। फिर से कोलंबो के लिए Thx।
बनाएं आप स्प्राइट के लिए एक संदर्भ रखने के लिए और इसे फिर से बनाने से पहले उसे नष्ट किया है। मेरा कोड दोबारा जांचें। – jorel