Экспорт диаграммы Ext-JS 6 в файл PNG/PDF/XLS

Question

Я создал 3D-диаграммы с помощью ext js 6. Я хочу сохранить диаграмму в файле PNG/PDF/XLS. Не могли бы вы дать мне знать, как сохранить изображение диаграммы в формате PNG/PDF/XLS.

Благодаря

Answer 1

Экспорт диаграммы в формате PNG fiddle:

function saveBase64AsFile(base64, fileName) { 
    var link = document.createElement("a"); 
    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
} 

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     var chart = Ext.create('Ext.chart.CartesianChart', { 
      renderTo: document.body, 
      width: 500, 
      height: 500, 
      flipXY: true, 
      store: { 
       fields: ['name', 'g1', 'g2'], 
       data: [{ 
        "name": "Item-0", 
        "g1": 18.34, 
        "g2": 0.04 
       }, { 
         "name": "Item-1", 
         "g1": 2.67, 
         "g2": 14.87 
         }, { 
         "name": "Item-2", 
         "g1": 1.90, 
         "g2": 5.72 
         }, { 
         "name": "Item-3", 
         "g1": 21.37, 
         "g2": 2.13 
         }, { 
         "name": "Item-4", 
         "g1": 2.67, 
         "g2": 8.53 
         }, { 
         "name": "Item-5", 
         "g1": 18.22, 
         "g2": 4.62 
         }, { 
         "name": "Item-6", 
         "g1": 28.51, 
         "g2": 12.43 
         }, { 
         "name": "Item-7", 
         "g1": 34.43, 
         "g2": 4.40 
         }, { 
         "name": "Item-8", 
         "g1": 21.65, 
         "g2": 13.87 
         }, { 
         "name": "Item-9", 
         "g1": 12.98, 
         "g2": 35.44 
         }, { 
         "name": "Item-10", 
         "g1": 22.96, 
         "g2": 38.70 
         }, { 
         "name": "Item-11", 
         "g1": 0.49, 
         "g2": 51.90 
         }, { 
         "name": "Item-12", 
         "g1": 20.87, 
         "g2": 62.07 
         }, { 
         "name": "Item-13", 
         "g1": 25.10, 
         "g2": 78.46 
         }, { 
         "name": "Item-14", 
         "g1": 16.87, 
         "g2": 56.80 
         }] 
      }, 

      //set legend configuration 
      legend: { 
       docked: 'right' 
      }, 

      //define the x and y-axis configuration. 
      axes: [{ 
       type: 'numeric', 
       position: 'bottom', 
       grid: true, 
       minimum: 0 
      }, { 
        type: 'category', 
        position: 'left' 
        }], 

      //define the actual bar series. 
      series: [{ 
       type: 'bar', 
       xField: 'name', 
       yField: ['g1', 'g2'], 
       axis: 'bottom', 
       // Cycles the green and blue fill mode over 2008 and 2009 
       // subStyle parameters also override style parameters 
       subStyle: { 
        fill: ["#115fa6", "#94ae0a"] 
       } 
      }] 
     }); 

     setTimeout(function() { 
      saveBase64AsFile(chart.getImage("stream").data, "export.png"); 
     }, 1000); 
    } 
});