最近需要学习 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. Objective - C 之类目

    一.类目(category):为已有的类(可以是系统类,也可以是自定义类)添加公有的新的方法: 例如:为系统已有的NSString类添加一个比较字符串大小的方法 1.创建过程: 2.NSString ...

  2. TCP建立连接和断开连接过程

    假设Client端发起中断连接请求,也就是发送FIN报文.Server端接到FIN报文后,意思是说"我Client端没有数据要发给你了",但是如果你还有数据没有发送完成,则不必急着 ...

  3. LoadRunner脚本增强技巧之参数化（二）

    特别提醒: 1.在形成数据池之后,数据库中的数据变化不会影响数据池中的数据. 2.数据文件一定要以一个空行结束,否则,最后一行输入的数据不会被参数所使用. 3.一般我们用到的很多的都是使用数据文件来保 ...

  4. mvc4中使用部分视图局部刷新实例

    如上效果图,网页中有主视图(上)和部分视图(下),点击提交会把文本框中的值发送到服务器,再返回所有添加的信息,在下方局部更新(只更新部分视图),实现如下: 1.网页主视图代码: @model MvcA ...

  5. CodeForces - 955B（用char会超时。。。）

    #include <bits/stdc++.h> #define mem(a, b) memset(a, b, sizeof(a)) using namespace std; , INF ...

  6. Doves and bombs UVA - 10765（统计割顶所连接的连通块的数量）

    题意:给定一个n个点的连通的无向图,一个点的“鸽子值”定义为将它从图中删去后连通块的个数. 求对应的点 和 每个点的“鸽子值” 用一个数组在判断割顶的那个地方 累加标记一下所连接的连通块的数量即可 初 ...

  7. java学习1-环境搭建

    1.材料准备 2.配置文档 3.验证java是否安装成功 打开cmd-->  java -version 提示以下即成功

  8. 【题解】NOIP2017时间复杂度

    对大模拟抱有深深的恐惧……不过这次写好像还好?拿个栈维护一下循环的嵌套,然后重定义一下读入即可.记得去年在考场上面死活调不粗来,代码也奇丑无比……希望今年能好一点吧! #include <bit ...

  9. 【BZOJ5333】荣誉称号（动态规划）

    [BZOJ5333]荣誉称号(动态规划) 题面 BZOJ 洛谷 题解 今天早上贱狗老师讲的.然而我还是不会. 只好照着\(zsy\)代码大力理解一波. 首先观察等式,如果比较熟悉线段树,会发现就是线段 ...

  10. Linux内核分析第二周学习博客——完成一个简单的时间片轮转多道程序内核代码

    Linux内核分析第二周学习博客 本周,通过实现一个简单的操作系统内核,我大致了解了操作系统运行的过程. 实验主要步骤如下: 代码分析: void my_process(void) { int i = ...