ExtJS：折れ線グラフ：グラフの仕上げが描かれたときに画像base64を取得する方法は？

Question

私は、線グラフを作成し、画像base64を取得するためのボタンを作成するためにExtJSを使用しています。今、私はこのボタンをしたくありません。折れ線グラフが描画を終え、イメージbase64を取得したときには、イベントの邪魔が必要です。私は "塗装された"イベントを見つけ、それを使用しようとしましたが、うまく動作しません。なぜですか？

参照：ExtJS line chart example

Answer 1

が私のためにうまく動作します。 シリーズ内にいくつかの線があるデカルトグラフ。 描画されたリスナーをデカルトグラフに追加し、デカルトグラフ（this）でgetImage（ 'stream'）を呼び出し、返されたオブジェクトのデータ要素をチェックアウトします。

Iは単にメッセージボックスに完全グラフのPNGデータが表示されるデカルトこのリスナーの構成を追加した：

listeners: { 
     painted: function(element, eOpts) { 
      Ext.Msg.alert('Image Data', this.getImage('stream').data); 
     } 
    }, 

ドキュメントから調整完全例えば以下参照：

Ext.create({ 
    xtype: 'cartesian', 
    renderTo: document.body, 
    width: 600, 
    height: 400, 
    insetPadding: 40, 
    listeners: { 
     painted: function(element, eOpts) { 
      Ext.Msg.alert('Image Data', this.getImage('stream').data); 
     } 
    }, 
    store: { 
     fields: ['name', 'data1', 'data2'], 
     data: [{ 
      'name': 'metric one', 
      'data1': 10, 
      'data2': 14 
     }, { 
      'name': 'metric two', 
      'data1': 7, 
      'data2': 16 
     }, { 
      'name': 'metric three', 
      'data1': 5, 
      'data2': 14 
     }, { 
      'name': 'metric four', 
      'data1': 2, 
      'data2': 6 
     }, { 
      'name': 'metric five', 
      'data1': 27, 
      'data2': 36 
     }] 
    }, 
    axes: [{ 
     type: 'numeric', 
     position: 'left', 
     fields: ['data1'], 
     title: { 
      text: 'Sample Values', 
      fontSize: 15 
     }, 
     grid: true, 
     minimum: 0 
    }, { 
     type: 'category', 
     position: 'bottom', 
     fields: ['name'], 
     title: { 
      text: 'Sample Values', 
      fontSize: 15 
     } 
    }], 
    series: [{ 
     type: 'line', 
     style: { 
      stroke: '#30BDA7', 
      lineWidth: 2 
     }, 
     xField: 'name', 
     yField: 'data1', 
     marker: { 
      type: 'path', 
      path: ['M', - 4, 0, 0, 4, 4, 0, 0, - 4, 'Z'], 
      stroke: '#30BDA7', 
      lineWidth: 2, 
      fill: 'white' 
     } 
    }, { 
     type: 'line', 
     fill: true, 
     style: { 
      fill: '#96D4C6', 
      fillOpacity: .6, 
      stroke: '#0A3F50', 
      strokeOpacity: .6, 
     }, 
     xField: 'name', 
     yField: 'data2', 
     marker: { 
      type: 'circle', 
      radius: 4, 
      lineWidth: 2, 
      fill: 'white' 
     } 
    }] 
});