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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Vue实现双向数据绑定
May 03 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
使用typescript快速开发一个cli的实现示例
Dec 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
浅析php原型模式
2014/11/25 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
numpy自动生成数组详解
2017/12/15 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python 私有化操作实例分析
2019/11/21 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
丑小鸭教学反思
2014/02/03 职场文书
小学教师年度个人总结
2015/02/05 职场文书
离婚案件上诉状
2015/05/23 职场文书
工作态度怎么写
2015/06/25 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android