本文实例讲述了JS插件amCharts实现绘制柱形图默认显示数值功能。分享给大家供大家参考,具体如下:
使用amCharts。js绘制柱形图(柱状图)时,有时需要默认显示每一个柱子的数值。
通过在AmCharts.AmGraph中设置labelText属性为[[价值]],即可实现上述需求。
效果如下所示:
上例的代码如下所示:
& lt; !DOCTYPE HTML公共”——//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”的在
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt; title> amCharts examples
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/style.css " rel=巴獠縩ofollow”type=" text/css "比;
& lt;脚本src=" http://www.amcharts.com/lib/3/amcharts.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本src=" http://www.amcharts.com/lib/3/serial.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本src=" http://www.amcharts.com/lib/3/themes/light.js "祝辞& lt;/script>
& lt; script>
var图表;
var chartData=https://www.yisu.com/zixun/[
{“国家”:“中国”,
“访问”:2325
},
{
“国家”:“美国”,
“访问”:1822
},
{
“国家”:“日本”,
“访问”:1809
},
{
“国家”:“德国”,
“访问”:1322
},
{
“国家”:“英国”,
“访问”:1122
},
{
“国家”:“法国”,
“访问”:1114
}
];
AmCharts。准备好(函数(){//串行图
图=new AmCharts.AmSerialChart (AmCharts.themes.light);
图表。dataProvider=chartData;
图表。categoryField=肮摇?
图表。startDuration=1;//轴//类别
var categoryAxis=chart.categoryAxis;
categoryAxis。labelRotation=90;
categoryAxis。gridPosition=翱肌?//值//如果你不想改变默认设置值的轴,//你不需要创建它,像祝辞& lt;/div>
& lt;/body>
& lt;/html>
之前
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》,《JavaScript页面元素操作技巧总结》,《JavaScript事件相关操作与技巧大全》,《JavaScript查找算法技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
