Heim > php教程 > php手册 > Hauptteil

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

WBOY
Freigeben: 2016-06-07 11:39:05
Original
2228 Leute haben es durchsucht

今天介绍一款统计图插件: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元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!