JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019-12-03 18:40
1211 查看
本文实例讲述了JS插件amCharts实现绘制柱形图默认显示数值功能。分享给大家供大家参考,具体如下:
使用amCharts.js绘制柱形图(column chart)时,有时需要默认显示每一个柱子的数值。
通过在AmCharts.AmGraph中设置labelText属性为[[value]],即可实现上述需求。
效果如下所示:
上例的代码如下所示:
<!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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Python实现绘制双柱状图并显示数值功能示例
- jQuery结合jQuery.cookie.js插件实现换肤功能示例
- JS实现的tab切换并显示相应内容模块功能示例
- vue.js使用v-if实现显示与隐藏功能示例
- JS实现指定区域的全屏显示功能示例
- JS实现密码框的显示密码和隐藏密码功能示例
- JS实现静态页面搜索并高亮显示功能完整示例
- JS基于FileSaver.js插件实现文件保存功能示例[原创]_javascript技巧_脚本之家
- vue.js实现格式化时间并每秒更新显示功能示例
- JS插件实现图表显示(曲线图表、柱形图表、饼状图表)
- JS+html5实现异步上传图片显示上传文件进度条功能示例
- JS插件实现图表显示(曲线图表、柱形图表、饼状图表)
- js实现默认文本框信息 鼠标点击时没有离开时显示
- js实现页面转发功能示例代码
- JS基于面向对象实现的拖拽功能示例
- js实现屏蔽默认快捷键调用自定义事件示例
- js插件zClip实现复制到剪贴板功能
- JS实现图片不存在时显示默认图片
- JS实现控制图片显示大小的方法【图片等比例缩放功能】
- 通过js实现得到焦点时文本框清空,失去焦点时又显示默认文字,值发生改变时不再恢复默认文字?