JS插件amCharts实现绘制柱形图默认显示数值功能示例


Posted in Javascript onNovember 26, 2019

本文实例讲述了JS插件amCharts实现绘制柱形图默认显示数值功能。分享给大家供大家参考,具体如下:

使用amCharts.js绘制柱形图(column chart)时,有时需要默认显示每一个柱子的数值。

通过在AmCharts.AmGraph中设置labelText属性为[[value]],即可实现上述需求。

效果如下所示:

JS插件amCharts实现绘制柱形图默认显示数值功能示例

上例的代码如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>amCharts examples</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" type="text/css">
  <script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
  <script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
  <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
  <script>
   var chart;
   var chartData = [
    {
     "country": "China",
     "visits": 2325
    },
    {
     "country": "USA",
     "visits": 1822
    },
    {
     "country": "Japan",
     "visits": 1809
    },
    {
     "country": "Germany",
     "visits": 1322
    },
    {
     "country": "UK",
     "visits": 1122
    },
    {
     "country": "France",
     "visits": 1114
    }
   ];
   AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart(AmCharts.themes.light);
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.startDuration = 1;
    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 90;
    categoryAxis.gridPosition = "start";
    // value
    // in case you don't want to change default settings of value axis,
    // you don't need to create it, as one value axis is created automatically.
    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.balloonText = "[[category]]: <b>[[value]]</b>";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 0.8;
    // display label text on each column
    graph.labelText = "[[value]]";
    chart.addGraph(graph);
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorAlpha = 0;
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonEnabled = false;
    chart.addChartCursor(chartCursor);
    chart.creditsPosition = "top-right";
    chart.write("chartdiv");
   });
  </script>
 </head>
 <body>
  <div id="chartdiv" style="width: 100%; height: 300px;"></div>
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
对node.js中render和send的用法详解
May 14 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
原生js实现贪食蛇小游戏的思路详解
Nov 26 #Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
JavaScript计算正方形面积
Nov 26 #Javascript
javaScript中indexOf用法技巧
Nov 26 #Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 #Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 #Javascript
You might like
使用PHP编写的SVN类
2013/07/18 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python抓取百度首页的方法
2015/05/19 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python 如何创建一个线程池
2020/07/28 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
《小儿垂钓》教学反思
2014/02/23 职场文书
班长竞选演讲稿
2014/04/24 职场文书
个人工作表现评价材料
2014/09/21 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS