jquery柱状图,图表效果,Highcharts统计图插件
Jun 07, 2016 am 11:39 AM今天介绍一款统计图插件: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元

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ketahui tentang contoh kod pengenalan untuk pengaturcaraan Python

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

Pembolehubah PHP dalam tindakan: 10 contoh penggunaan sebenar

Java melaksanakan kod isihan gelembung mudah

Contoh pengaturcaraan bahasa Go: contoh kod dalam pembangunan web

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

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