导出 amcharts 3d 柱形图

简介

amcharts 3d 柱形图是一种可视化数据的方式，可以展示数据的比较和趋势。本文将介绍如何通过 JavaScript 导出 amcharts 3d 柱形图。

环境要求

• amcharts 3d
• JavaScript

步骤

1. 创建一个含有数据的 amcharts 3d 柱形图。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "depth3D": 20,
  "angle": 30,
  "dataProvider": [{
    "country": "USA",
    "visits": 4025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }],
  "categoryField": "country",
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 0
  },
  "export": {
    "enabled": true
  }
});

2. 导出 amcharts 3d 柱形图。

chart["export"].capture({}, function() {
  this.toPNG({}, function(data) {
    // 将 png 数据转成二进制文件
    var blob = new Blob([data], {
      type: "image/png"
    });

    // 创建下载链接
    var link = document.createElement("a");
    link.download = "chart.png";
    link.href = window.URL.createObjectURL(blob);

    // 点击下载链接
    link.click();
  });
});

结论

通过上述步骤，可以轻松导出 amcharts 3d 柱形图。该方法也适用于导出其他类型的 amcharts 图表。