jquery柱状图，图表效果，Highcharts统计图插件-php手册-PHP中文网

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

php中文网

发布： 2016-06-07 11:39:05

原创

1848人浏览过

今天介绍一款统计图插件：Highcharts。通过它生成一个季节平均降雨量柱状统计图。
jquery柱状图，图表效果，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: '' + '', 

            footerFormat: '{series.name}:  {point.y:.1f} mm
', 

            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