您好,欢迎访问一九零五行业门户网

jquery柱状图,图表效果,Highcharts统计图插件

今天介绍一款统计图插件:highcharts。通过它生成一个季节平均降雨量柱状统计图。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示demo,最主要是可以免费下载。1、
首先我们引入jquery库和hightcharts相关插件:
接着我们在页面上放置一个div#highcharts,用来生成统计图的区域。
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: '{point.key}', 
            pointformat: '{series.name}:  ' + '{point.y:.1f} mm
', 
            footerformat: '
', 
            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
ad:真正免费,域名+虚机+企业邮箱=0元
其它类似信息

推荐信息