Markieren Sie einen Teil eines extjs4 Liniendiagramms

Question

In den unten stehenden extjs 4.1.1a Code ist ein Arbeitsbeispiel für ein Liniendiagramm. Jetzt muss ich einen Teil dieses Diagramms auf einen gegebenen Min- und Max-Zeitstempel markieren.

Ich habe das Sencha Forum durchsucht und nichts gefunden, was meine Anforderungen erfüllt. Jetzt konnte ich die Farbe der Punkte im Liniendiagramm mit einem benutzerdefinierten Renderer ändern.

'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}); 
}} 

Aber ich habe keine Möglichkeit gefunden, die Farbe unter der Linie zu ändern. Irgendwelche Vorschläge dazu?

UPDATE - Arbeiten fein jetzt

ich eine Lösung auf der Grundlage der von Colombo gegebenen Antwort implementieren.

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

Das sieht wirklich gut und hat die Wirkung, die ich für und im Falle der Hoffnung, wurde die Größe der Container das neue Sprite aus der Tabelle gelöscht. Danke nochmal an Colombo.

Answer 1

Dies ist möglich zu implementieren. Hier ist, wie ich es machen würde.

1. Fügen Sie einen Listener für afterrender Ereignis für series hinzu.

listeners: { 
       afterrender: function (p) { 
        this.doCustomDrawing(); 
       }, 
       scope: me 
} 

2. eine CompositeSprite erstellen

doCustomDrawing: function() { 
    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 
     }); 

     // Draw hilight here 
     Ext.each(series.items, function (item) { 
      var storeItem = item.storeItem, 
       pointX = item.point[0], 
       pointY = item.point[1]; 

      //TODO: Create your new line sprite using pointX and pointY 
      // and add it to CompositeSprite me.groupChain 


     }); 

     me.groupChain.show(true); 
    } 
}, 

Answer 2

Es gibt keine "eingebaute" Möglichkeit, dies zu tun. Sie werden wahrscheinlich einige Schwierigkeiten haben, danach zu suchen, denn "Hervorhebung" eines Liniendiagramms bedeutet derzeit etwas völlig anderes in der ExtJS-API. Es bezieht sich normalerweise auf das Hervorheben der Linie und der Markierungen, wenn Sie die Maus über einer Datenreihe bewegen.

Aber Ihre Idee klingt interessant, ich könnte dies in einem Projekt, das ich habe, verwenden müssen.

Ich habe nicht die Zeit, um den genauen Code jetzt zu erarbeiten, aber dies könnte getan werden, indem Sie ein rechteckiges sprite erstellen und es zu surface property des Diagramms hinzufügen.

Sie können dies auch tun, nachdem das Diagramm mit der Methode Ext.draw.Surface.add wie in der Dokumentation here beschrieben gerendert wurde.

Sie müssen mit Logik für die Bestimmung der Breite und Positionierung, wenn ich die Diagramm API richtig erinnere, sollten Sie in der Lage sein, x Koordinaten (horizontale Position) einzelner Datensätze durch Angeln in der items Eigenschaft des zu extrahieren Ext.chart.series.Line Objekt im Diagramm.

Die Höhe des Highlights sollte jedoch einfach sein - lesen Sie einfach die Höhe des Diagramms.