在 amCharts 中将图表导出为图像时如何显示加载程序？

Question

有时点击导出按钮会花费太多时间。多次单击会弹出一个弹出窗口，询问是否允许多个文件下载。当我不允许多次下载时，我无法下载任何图表。是否可以在后台进行某些下载时显示加载程序？还是有其他解决方案？

提前谢谢你。

Answer 1

有 J 查询插件 'fileDownload'。这是 link 他们的工作演示。

http://jqueryfiledownload.apphb.com/

Answer 2

您可以使用导出插件的 beforeCapture 事件处理程序暂时禁用导出菜单，使其无法被点击两次。

为此，只需使用 crateMenu() 调用一个空菜单项。

"export": {
  "enabled": true,
  "beforeCapture": function() {
    this.createMenu( [{
      "class": "export-main disabled"
    }] );
  }
}

请注意项目的 class 设置。 "export-main" 部分将确保该按钮看起来像默认的导出按钮。我还添加了 "disabled" 部分。我们可以使用它来使用自定义 CSS 覆盖此类禁用元素的默认样式。即：

.amcharts-export-menu .export-main.disabled > a {
  cursor: default;
  opacity: 0.2;
}

我在这里提供了一个非常简单的 CSS 覆盖。您可以将其替换为更复杂的样式，例如其中的动画 gif 或其他内容。由你决定。

我们不需要重置菜单，因为导出插件会在导出完成后为我们做这件事。

这是一个完整的工作演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 45
  },
  "export": {
    "enabled": true,
    "beforeCapture": function() {
      this.createMenu( [{
        "class": "export-main disabled"
      }] );
    }
  }

});

#chartdiv {
  width: 100%;
  height: 200px;
}

.amcharts-export-menu .export-main.disabled > a {
  cursor: default;
  opacity: 0.2;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

在 amCharts 中将图表导出为图像时如何显示加载程序？

How to show loader while exporting chart as Image in amCharts?

javascript

jquery

charts

amcharts