没有图例的图表图像

Question

使用 chart.getImage() 时，我得到了图表，但图例并没有随之而来。这已被标记为 Ext 错误一年多了。我想知道是否有人可以解决这个问题？

Answer 1

我遇到了同样的问题，不幸的是，ext 中目前没有解决此问题的方法。但在我的应用程序中，我所做的是使用 html2canvas 下载带有图例、标题和其他自定义精灵的图表。 html2canvas 是一款免费的轻量级软件。

对于支持下载属性的浏览器，可以使用如下代码。

var chart = chartObj.down('chart');
html2canvas(chart.el.dom, {
  onrendered: function(canvas) {
    var myMsg = Ext.create('Ext.window.MessageBox', {
      closeAction: 'destroy'
    });
    myMsg.show({
      title: 'Confirm Download',
      message: 'Would you like to download the chart as an image?',       
      icon: Ext.Msg.QUESTION,
      buttons: Ext.Msg.YESNO,
      closeAction: 'destroy',
      height: 165,
      width: 350
    });
    var button = myMsg.query("button[text=Yes]")[0];
    button.el.dom.setAttribute("download", "Bar Chart.png");
    var dataURL = canvas.toDataURL('image/png');
    button.setHref(dataURL);
  },
  height: chartObj.getHeight() + 500
});

对于IE，您可以如下编码。

Ext.Msg.confirm({
  title: 'Confirm Download',
  message: 'Would you like to download the chart as an image?',
  icon: Ext.Msg.QUESTION,
  buttons: Ext.Msg.YESNO,
  closeAction: 'destroy',
  height: 165,
  width: 350,
  fn: function(btn) {
    if (btn === 'yes') {
      var chartObj = button.up('chart-container');
      html2canvas(chartObj.down('chart[hidden=false]').el.dom, {
        onrendered: function(canvas) {
          window.navigator.msSaveBlob(canvas.msToBlob(), 'Bar Chart.png');
        },
        height: chartObj.getHeight() + 500
      });
    }
  }
});

参考更多关于html2canvas

没有图例的图表图像

Chart image without legend

javascript

extjs

extjs5