今天介绍一款统计图插件:Highcharts。通过它生成一个季节平均降雨量柱状统计图。

页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、
首先我们引入jQuery库和hightcharts相关插件:
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
接着我们在页面上放置一个div#highcharts,用来生成统计图的区域。
<div class="demo" id="highcharts"></div>
2、
通过以下配置,可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转(标签名称太长的情况)、XY轴均可放大的、去除LOGO信息的统计图表。具体请看代码和注释:
$(function() {
$('#highcharts').highcharts({
chart: {
type: 'column'
},
title: { //标题
text: '季节平均降雨量'
},
subtitle: { //副标题
text: '来源: sucaihuo.com'
},
xAxis: { //X轴选项
categories: [ //设置X轴分类名称
'春季', '夏季', '秋季', '冬季', ]
},
yAxis: { //Y轴选项
min: 0,
//Y轴最小值
title: { //Y轴标题
text: '降雨量 (mm)'
}
},
tooltip: { //数据点提示框 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: { //数据点选项
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{ //数据列选项
name: '江苏',
//显示数据列的名称
data: [49.9, 71.5, 106.4, 129.2] //数组或JSON,如:data:[0, 5, 3, 5],或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
},
{
name: '浙江',
data: [83.6, 78.8, 98.5, 93.4]

},
{
name: '山东',
data: [48.9, 38.8, 39.3, 41.4]

},
{
name: '广东',
data: [42.4, 33.2, 34.5, 39.7]

}],
credits: {
enabled: false //不显示highCharts版权信息
},
exporting: {
enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示
},
});
});
这样就生成了一张季节平均降雨量柱状统计图。

查看Highcharts插件的配置选项:http://www.sucaihuo.com/js/49.html 查看该特效演示及免费下载,请访问:http://www.sucaihuo.com/js/48.html

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。