Rumah php教程 php手册 jquery柱状图,图表效果,Highcharts统计图插件

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

Jun 07, 2016 am 11:39 AM

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ketahui tentang contoh kod pengenalan untuk pengaturcaraan Python Ketahui tentang contoh kod pengenalan untuk pengaturcaraan Python Jan 04, 2024 am 10:50 AM

Ketahui tentang contoh kod pengenalan untuk pengaturcaraan Python

Cara menggunakan PHP untuk menulis kod fungsi pengurusan inventori dalam sistem pengurusan inventori Cara menggunakan PHP untuk menulis kod fungsi pengurusan inventori dalam sistem pengurusan inventori Aug 06, 2023 pm 04:49 PM

Cara menggunakan PHP untuk menulis kod fungsi pengurusan inventori dalam sistem pengurusan inventori

Pembolehubah PHP dalam tindakan: 10 contoh penggunaan sebenar Pembolehubah PHP dalam tindakan: 10 contoh penggunaan sebenar Feb 19, 2024 pm 03:00 PM

Pembolehubah PHP dalam tindakan: 10 contoh penggunaan sebenar

Java melaksanakan kod isihan gelembung mudah Java melaksanakan kod isihan gelembung mudah Jan 30, 2024 am 09:34 AM

Java melaksanakan kod isihan gelembung mudah

Contoh pengaturcaraan bahasa Go: contoh kod dalam pembangunan web Contoh pengaturcaraan bahasa Go: contoh kod dalam pembangunan web Mar 04, 2024 pm 04:54 PM

Contoh pengaturcaraan bahasa Go: contoh kod dalam pembangunan web

Panduan Sambungan Pengkomputeran Tepi Awan Huawei: Contoh kod Java untuk melaksanakan antara muka dengan cepat Panduan Sambungan Pengkomputeran Tepi Awan Huawei: Contoh kod Java untuk melaksanakan antara muka dengan cepat Jul 05, 2023 pm 09:57 PM

Panduan Sambungan Pengkomputeran Tepi Awan Huawei: Contoh kod Java untuk melaksanakan antara muka dengan cepat

Daripada pemula hingga mahir: Pelaksanaan kod struktur data yang biasa digunakan dalam bahasa Go Daripada pemula hingga mahir: Pelaksanaan kod struktur data yang biasa digunakan dalam bahasa Go Mar 04, 2024 pm 03:09 PM

Daripada pemula hingga mahir: Pelaksanaan kod struktur data yang biasa digunakan dalam bahasa Go

Panduan dan Contoh: Belajar untuk melaksanakan algoritma isihan pemilihan dalam Java Panduan dan Contoh: Belajar untuk melaksanakan algoritma isihan pemilihan dalam Java Feb 18, 2024 am 10:52 AM

Panduan dan Contoh: Belajar untuk melaksanakan algoritma isihan pemilihan dalam Java

See all articles