最近需要学习 Amcharts ，他的图表功能确实很强大。但是网上搜索到的教程很少，开始学起的确有点不方便。于是我决定把我学习的觉得好的途径，放到博客上。

下面的代码可以直接复制，但是文件要从官网上下载下来。官网地址：www.amcharts.com

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>  

    <!-- 导入Amcharts js 库 -->

    <script src="amcharts/amcharts.js" type="text/javascript"></script>

    <script type="text/javascript">  

        var fun1 = function(){

            var chartData = [{ country: "USA", visits: 4252 },

                    { country: "China", visits: 1882 },

                    { country: "Japan", visits: 1809 },

                    { country: "Germany", visits: 1322 },

                    { country: "UK", visits: 1122 },

                    { country: "France", visits: 1114 },

                    { country: "India", visits: 984 },

                    { country: "Spain", visits: 711 },

                    { country: "Netherlands", visits: 665 },

                    { country: "Russia", visits: 580 },

                    { country: "South Korea", visits: 443 },

                    { country: "Canada", visits: 441 },

                    { country: "Brazil", visits: 395 },

                    { country: "Italy", visits: 386 },

                    { country: "Australia", visits: 384 },

                    { country: "Taiwan", visits: 338 },

                    { country: "Poland", visits: 328}];  

            //AmSerialChart 类

            var chart = new AmCharts.AmSerialChart();

            chart.dataProvider = chartData;     //指定数据源

            chart.categoryField = "country";    //数据的分类  

            //创建

            var graph = new AmCharts.AmGraph();

            graph.valueField = "visits";    //数值字段名称

            graph.type = "column";          //列名称

            chart.addGraph(graph);  

            chart.write(document.getElementById("chartContainer")); //write 到 div 中

        }

    </script>

  </head>  

  <body onload="fun1()">

    <div id="chartContainer" style="width: 640px; height: 400px;"></div>

  </body>

</html

上面代码执行后的效果图如下：

下面继续添加代码优化显示效果，注意下面的代码要放到

chart.write(document.getElementById("chartContainer")); 上面执行。
var categoryAxis = chart.categoryAxis;

categoryAxis.autoGridCount  = false;//设置为false，否则gridount属性会被忽略。

categoryAxis.gridCount = chartData.length;

categoryAxis.gridPosition = "start";

categoryAxis.labelRotation = 90;//图形下面的文字旋转90度。

效果图：

下面填充3D：

graph.fillAlphas = 0.8;//填充柱形图的颜色

chart.angle = 30;

chart.depth3D = 15;//控制列的深度和角度

graph.balloonText = "[[category]]: <b>[[value]]</b>";//在数值前面加上国家名

效果图：

制作面积图

graph.type = "line";

graph.fillAlphas = 0.5;

效果图：

带有项目符号的折线图

graph.fillAlphas = 0; // 或者删除这一行, 因为0是默认值

graph.bullet = "round";

graph.lineColor = "#8d1cc6";

效果图

Amcharts 柱状图和线形图的更多相关文章

  1. ***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图

    /** * 百度数据统计图表echart的PHP实现类 * * 原作者: * @author: chenliujin <liujin.chen@qq.com> * @since 2013- ...

  2. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  3. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  4. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  5. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  6. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  7. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  8. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  9. Android图表库MPAndroidChart(二)——线形图的方方面面，看完你会回来感谢我的

    Android图表库MPAndroidChart(二)--线形图的方方面面,看完你会回来感谢我的 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...

随机推荐

  1. virtio 之后的数据直连

    在上一篇中说了virtio这种半虚拟化方案之后,还有一种全虚拟化的方案,这种全虚拟化的方案中,直接宿主机上的设备,直接被虚拟化成了n个设备,然后这些设备可以直接被加载进guest os中当做一个普通的 ...

  2. 在dbgrid中如何多行选中记录（ctl与shift均可用）

    在dbgrid中如何多行选中记录(ctl与shift均可用),设置dbgrid的dgmultiselect为true,只有ctl好用而shift不好用,如何使shift也好用 Dbgrid源代码:pr ...

  3. Java NIO中的Buffer

    简介 Buffer缓冲区,首先要弄明白的是,缓冲区是怎样一个概念.它其实是缓存的一种,我们常说的缓存,包括保存在硬盘上的浏览器缓存,保存在内存中的缓存(比如Redis.memcached).Buffe ...

  4. appium手机操作

    1.按键操作 pressKeyCode(key, metastate) key为按键事件,metastate为辅助功能键 举例: pressKeyCode(AndroidKeyCode.HOME)   ...

  5. WordPress忘记密码找回登录密码的四种行之有效的方法

    WordPress忘记密码找回登录密码的四种行之有效的方法 PS:20170214更新,感谢SuperDoge同学提供的方法,登入phpMyAdmin后,先从左边选自己的数据库,然后点上面的 SQL ...

  6. Sum of Consecutive Integers LightOJ - 1278（推公式 数学思维）

    原文地址:https://blog.csdn.net/qq_37632935/article/details/79465213 给你一个数n(n<=10^14),然后问n能用几个连续的数表示; ...

  7. [AT2369] [agc013_c] Ants on a Circle

    题目链接 AtCoder:https://agc013.contest.atcoder.jp/tasks/agc013_c 洛谷:https://www.luogu.org/problemnew/sh ...

  8. 【hdu6072】Logical Chain

    Kosaraju算法,然後bitset優化 主要是學習一下自寫bitset的姿勢 #include<cstring> #include<algorithm> #include& ...

  9. 【CodeChef-SPCLN】Cleaning the Space

    https://odzkskevi.qnssl.com/7dfb262544887eff6fb35bfb444759d6?v=1502084197 做法是类似于最大割之类的东西,把每个碎片按照按钮拆点 ...

  10. 洛谷 P1854 花店橱窗布置 【dp】

    题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...