Question

我使用ExtJS创建折线图并创建一个按钮来获取图像base64。现在，我不想要这个按钮。当折线图完成绘制然后获得图像base64时，我需要一个事件。我发现了一个事件＆＃34;画了＆＃34;，我尝试使用它，但它无法工作，为什么？。

Answer 1

对我来说效果很好。笛卡尔图中有一系列和一些线。将绘制的侦听器添加到笛卡尔图，在笛卡尔图上调用getImage（＆＃39; stream＆＃39;）（这），检查返回对象的数据元素。

我只是将这个监听器配置添加到了笛卡尔，它将在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'
       }
   }]
});

ExtJS：折线图：当图表完成绘制时如何获得图像base64？

1 个答案: