amcharts开始使用amcharts


备注

amCharts是一组基于JavaScript的数据可视化库,包括常规图表类型,如Serial,Pie等,以及高级的图表类型和地图。

介绍

在使用amCharts之前,您需要包含必需的JavaScript库。

所有amCharts操作都需要一个主库 - amcharts.js 。它需要首先包含在内并且是强制性的。

每种图表类型都需要图表类型特定的包含。例如串行图表,也需要serial.js ,饼图需要pie.js等。

如果在同一网页上您将显示多种不同的图表类型,则需要包括该页面上显示的所有特定于图表类型的包含。

附加包括

除了主要的功能包括,您可能需要其他包括,如主题和插件。它们分别位于/ themes // plugins /子目录中。

即:

<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/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
 

创建图表

该图表由HTML容器和实例化其中的图表的JavaScript代码组成。

HTML

我们使用<div> 元素作为图表容器。

<div id="chartdiv" style="height: 300px;"></div>
 

JavaScript的

要实例化图表,我们使用AmCharts.makeChart() 函数。第一个参数是放置图表的容器的id,第二个参数是带有图表配置的对象。

它至少必须包含type 参数,它保存图表类型。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "categoryField": "country"
});
 

从amCharts CDN加载

AmCharts提供负载均衡,可靠的CDN,用于直接从我们的Web服务器加载库。使用https://www.amcharts.com/lib/3/作为包含的基本URL。

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
 

从您自己的服务器加载库

为此,[下载] [1]一个必需的amCharts产品ZIP存档。

解压缩并放在Web服务器上的某个位置。即/ amcharts /子目录。

然后只需使用<script> 标签加载它们:

<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>