ホームページ >php教程 >php手册 >jquery柱状图,图表效果,Highcharts统计图插件

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

WBOY
WBOYオリジナル
2016-06-07 11:39:052272ブラウズ

今天介绍一款统计图插件:Highcharts。通过它生成一个季节平均降雨量柱状统计图。
jquery柱状图,图表效果,Highcharts统计图插件
页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> 首先我们引入jQuery库和hightcharts相关插件:<br> <script></script> <br> <script></script><br> 接着我们在页面上放置一个div#highcharts,用来生成统计图的区域。<br> <div></div> <br> 2、<br> 通过以下配置,可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转(标签名称太长的情况)、XY轴均可放大的、去除LOGO信息的统计图表。具体请看代码和注释:<br> $(function() { <br>     $('#highcharts').highcharts({ <br>         chart: { <br>             type: 'column' <br>         }, <br>         title: { //标题 <br>             text: '季节平均降雨量' <br>         }, <br>         subtitle: { //副标题 <br>             text: '来源: sucaihuo.com' <br>         }, <br>         xAxis: { //X轴选项 <br>             categories: [ //设置X轴分类名称 <br>             '春季', '夏季', '秋季', '冬季', ] <br>         }, <br>         yAxis: { //Y轴选项 <br>             min: 0, <br>             //Y轴最小值 <br>             title: { //Y轴标题 <br>                 text: '降雨量 (mm)' <br>             } <br>         }, <br>         tooltip: { //数据点提示框 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等 <br>             headerFormat: '<span>{point.key}</span><table>', <br>             pointFormat: '<tr> <td>{series.name}: </td>' + '<td><b>{point.y:.1f} mm</b></td> </tr>', <br>             footerFormat: '</table>', <br>             shared: true, <br>             useHTML: true <br>         }, <br>         plotOptions: { //数据点选项 <br>             column: { <br>                 pointPadding: 0.2, <br>                 borderWidth: 0 <br>             } <br>         }, <br>         series: [{ //数据列选项 <br>             name: '江苏', <br>             //显示数据列的名称 <br>             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}] <br>         }, <br>         { <br>             name: '浙江', <br>             data: [83.6, 78.8, 98.5, 93.4] <br>  <br>         }, <br>         { <br>             name: '山东', <br>             data: [48.9, 38.8, 39.3, 41.4] <br>  <br>         }, <br>         { <br>             name: '广东', <br>             data: [42.4, 33.2, 34.5, 39.7] <br>  <br>         }], <br>         credits: { <br>             enabled: false //不显示highCharts版权信息 <br>         }, <br>         exporting: { <br>             enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示 <br>         }, <br>     }); <br> });<br> 这样就生成了一张季节平均降雨量柱状统计图。<br> <br> 查看Highcharts插件的配置选项:http://www.sucaihuo.com/js/49.html查看该特效演示及免费下载,请访问:http://www.sucaihuo.com/js/48.html

AD:真正免费,域名+虚机+企业邮箱=0元

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。