本文实例讲述了jQuery插件HighCharts绘制简单二维柱状图效果。分享给大家供大家参考,具体如下:
1,实例代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> HighCharts二维柱状图& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.7.2.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/highcharts.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$ (' # columnChart ') .highcharts ({
图:{
类型:“列”
},
标题:{
文本:“(jb51.net统计)2016年月收入”
},
副标题:{
文本:“月收入”
},
xAxis: {
类别:[
“一月”,
“二月”,
“三月”,
“四月”,
“五月”,
“六月”,
“七月”,
“八月”,
“九月”,
“十月”,
“十一月”,
“十二月”
]
},
桠溪:{
分钟:0,
标题:{
文本:“收入(￥)
}
},
提示:{
headerFormat:“& lt;跨在{point.key} & lt;/span> & lt; table>”,
pointFormat:“& lt; tr> & lt; td祝辞{series.name}: & lt;/td>“+
“& lt; td祝辞& lt; b> {point.y:。1 f}元& lt;/b> & lt;/td> & lt;/tr>”
footerFormat:“& lt;/table>”
共享:没错,
useHTML:真
},
plotOptions: {
专栏:{
pointPadding: 0.2,
borderWidth: 0
}
},
系列:[{
名称:“张三”,
数据:(4995,7169,1064,7292,2440,4545,6545,9564,1245,4512,6523,4514]
}, {
名称:“李思”,
数据:(8361,2354,4512,2356,4515,6451,9865,5455,8254,6562,6945,2356]
}, {
名称:“王武”,
数据:(4512,9565,6564,2652,3265,1202,7845,9845,2356,7844,5424,6312]
}, {
名称:“赵六”,
数据:(6523,8956,6531,6532,9864,4552,9564,7845,6523,4512,8956,2356]
})
})；
})；
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" columnChart "祝辞& lt;/div>
& lt;/body>
& lt;/html>
2,运行效果图如下:
jQuery插件HighCharts绘制简单二维柱状图效果示例【附演示源码】
