ExtJS：折線圖：圖表完成繪製時如何獲取圖像base64？

Question

我使用ExtJS創建折線圖並創建一個按鈕來獲取圖像base64.Now，我不想要這個按鈕。當線圖完成繪製時，我需要一個事件觸發，然後獲取圖像base64。我發現一個事件「畫」，我嘗試使用它，但它不能工作，爲什麼？

參考：ExtJS line chart example

Answer 1

工作得很好，對我來說。 笛卡爾圖與一系列和一些線內。 將繪製的監聽器添加到笛卡爾圖中，在笛卡爾圖（this）上調用getImage（'stream'），檢查返回對象的數據元素。

我僅加入此偵聽配置笛卡爾這將在一個MessageBox顯示全圖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' 
     } 
    }] 
});