在EXTJS折線圖中創建自定義線

Question

我需要在我的折線圖上靠近圖表上的指定點（由數據指定，而不是座標）添加垂直線和文本。我試圖使用CompositeSprites，但它不能完全顯示在屏幕上。我是ExtJS繪圖的新手。

Answer 1

您應該在圖表的refresh事件偵聽器內部添加垂直線的邏輯，這樣，如果數據更改，行位置將更新以反映新數據。

這裏是你如何能做到這一點，假設你可以得到圖表容器的引用一個例子（如「myPanel」）：

var myChart = myPanel.down('chart'), 

myChart.on('refresh', function(myChart) { 

    // First, get a reference to the record that you want to position your 
    // vertical line at. I used a "findRecord" call below but you can use 
    // any of the datastore query methods to locate the record based on 
    // some logic: findBy (returns index #), getAt, getById, query, queryBy 
    var myRecord = myChart.store.findRecord(/*[someField]*/, /*[someValue]*/), 

    // a reference to the series (line) on the chart that shows the record 
    mySeries = myChart.series.first(), 

    // get the chart point that represents the data 
    myPoint = Ext.each(mySeries.items, function(point) { 
     return myRecord.id === point.storeItem.id; 
    }), 

    // the horizontal position of the point 
    xCoord = point.point[0], 

    // check for any previously drawn vertical line 
    myLine = myChart.surface.items.findBy(function(item) { 
     item.id === 'vert' 
    }); 

    // if there is no previously drawn line add it to the "surface" 
    if (!myLine) { 

     myChart.surface.add({ 
      id: 'vert', // an id so that we can find it again later 
      type: 'rect', 
      width: 4, 
      height: myChart.surface.height, // the same height as the chart 
      fill: 'black', 
      opacity: 0.5, // some transparency might be good 
      x: xCoord, 
      y: 0 // start the line at the top of the chart 
     }); 

    // if we already had a line just reposition it's x coordinate    
    } else { 

     myLine.setAttributes({ 
      translate: { 
       x: xCoord, 
       y: 0 
      } 

     // I think the chart gets drawn right after the refresh event so 
     // this can be false, I haven't tested it though 
     }, false); 

    } 
}); 

如果您使用的是MVC模式，將事件處理程序看起來有點不同（你不會使用myChart.on()）。