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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
javascript学习之json入门
2016/12/22 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
python使用Matplotlib画饼图
2018/09/25 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Django如何将URL映射到视图
2019/07/29 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
小学体育教学反思
2014/01/31 职场文书
《王二小》教学反思
2014/02/27 职场文书
同学会主持词
2014/03/18 职场文书
中标通知书
2015/04/17 职场文书
暂停营业通知
2015/04/25 职场文书
详解Python函数print用法
2021/06/18 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android