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()를 사용하지 않을 것이다).