Question

使用chart.getImage（）时，我得到了图表，但图例并没有出现。这已被标记为Ext bug一年多了。我想知道是否有人为此工作？

Answer 1

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

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

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

没有图例的图表图片

1 个答案: