
amCharts是一款优秀的数据可视化js图形库,包括Javascript Charts, Javascript Stock Chart和Interactive Javascript Maps三类产品,本文简单介绍一下Javascript Charts的用法。
amCharts的安装:
从amCharts官方网站下载所需的图形组件,将压缩包解压至备选目录。把amcharts文件夹从下载到的zip文件中拷贝至工作目录下。然后使用你熟悉的编辑器创建一个简单的html文件,例如命名为columnchart.html。
接下来,我们打开文件开始编码。
添加容器:
页面所需的唯一HTML元素就是图表的容器。我们像这样来添加一个DIV:
<body>
<div id="chartdiv"></div>
</body>
JavaScript图表将使用这个对象作为绘图容器。请注意我们将其命名为"chartdiv",这个名字后面会用到。
引用JavaScript库文件
在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件,为了节省几个kb空间—你需要添加amchart.js主文件,并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种,因此我们包含这两个js文件:
<script src="amcharts/amcharts.js" type="text/javascript"></script> <script src="amcharts/serial.js" type="text/javascript"></script>
注意:添加顺序很重要,amcharts.js应该放在最前面。
我们需要一些示例数据来生成图表,在此我们添加一个简单的JavaScript数组对象:
<script type="text/javascript">
var chartData = ...