使用amCharts绘制统计图表(柱状图、折线图、3D图)

使用amCharts绘制统计图表(柱状图、折线图、3D图)_第1张图片

amCharts是一款优秀的数据可视化js图形库,包括Javascript Charts, Javascript Stock Chart和Interactive Javascript Maps三类产品,本文简单介绍一下Javascript Charts的用法。

amCharts的安装:

从amCharts官方网站下载所需的图形组件,将压缩包解压至备选目录。把amcharts文件夹从下载到的zip文件中拷贝至工作目录下。然后使用你熟悉的编辑器创建一个简单的html文件,例如命名为columnchart.html。

接下来,我们打开文件开始编码。

添加容器:

页面所需的唯一HTML元素就是图表的容器。我们像这样来添加一个DIV:


    

JavaScript图表将使用这个对象作为绘图容器。请注意我们将其命名为"chartdiv",这个名字后面会用到。

引用JavaScript库文件

在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件,为了节省几个kb空间—你需要添加amchart.js主文件,并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种,因此我们包含这两个js文件:


注意:添加顺序很重要,amcharts.js应该放在最前面。

我们需要一些示例数据来生成图表,在此我们添加一个简单的JavaScript数组对象:


                    
                    

你可能感兴趣的:(使用amCharts绘制统计图表(柱状图、折线图、3D图))