javascript - 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()）。