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 相关文章推荐
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
Seajs源码详解分析
Apr 02 Javascript
Vue+ElementUI table实现表格分页
Dec 14 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 代码优化的42条建议 推荐
2009/09/25 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
什么是Rollback Segment
2013/04/22 面试题
学习经验交流会主持词
2014/04/01 职场文书
小班评语大全
2014/05/04 职场文书
篮球社团活动总结
2014/06/27 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技