细谈Highcharts（一）

来源：互联网发布：pc装mac os 编辑：程序博客网时间：2024/06/05 19:54

细谈Highcharts（一）

啃啃，今天装下“砖家”！！！
在几天的制图研究中，本以为VS2010自带的CHART控件已经很无敌了，没想到Highcharts这玩意强大到差一点迷失我，吭，言归正传，Highcharts（http://www.hcharts.cn/index.php）是一个纯JS的图表库，它功能强大，美观，图表丰富，对绝大多数浏览器都兼容，且开源（

哎呀妈呀，开源什么的我最喜欢了）当然了这里要淡定，开源只是对于个人用户及非商业用途的，要是用于商业盈利还是要购买相应权限的，（价格还是很便宜的哟！）具体的见http://www.hcharts.cn/open/license.php。
我是专家，我是专家！虽然说粘贴复制就可以实现大多数功能，我还是决定细细分析一下，让大家用的明白，下面我以柱状图为例介绍一下：

这是一个月发电量的统计表实例图，就是用的Highcharts做的，具体步骤如下，首先去Highcharts中文网(http://www.hcharts.cn/index.php)下载最新的Highcharts，解压后你会得到类似这样的一下文件

把其中

文件夹中的

和modules文件夹中的

文件复制出来，添加到你的存放JS文件的文件夹中，由于highcharts类库是纯JS图表库，所以要用的jquery-1.8.3.min.js文件，这个可以自行下载（http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js）当所需文件准备停当，运行代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>柱状图Test</title>

$(function () {

$('#column').highcharts({

chart: { //图表

type: 'column' //类型：'柱状图'

title: { //标题

text: '月电量统计'

// subtitle: { //副标题（可有可无）

// text: '月电量统计'

// },

credits: {

enabled: false // 禁用版权信息

xAxis: { //x轴

categories: [

'1',

'2',

'3',

'4',

'5',

'6',

'7',

'8',

'9',

'10',

'11',

'12'

]

yAxis: { //y轴

min: 0,

title: {

text: 'kw/h'

}

tooltip: { //数据点提示框：当鼠标滑过某点时，以框的形式提示改点的数据，比如该点的值，数据单位等

headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

'<td style="padding:0"><b>{point.y:.1f} kw</b></td></tr>',

footerFormat: '</table>',

shared: true,

useHTML: true

plotOptions: { //数据点配置:

column: {

pointPadding: 0.2,

borderWidth: 0

}

series: [{ //数据列：图表上一个或多个数据系列，比如图表中的一条曲线，一个柱形

name: '发电量',

data: [160, 49, 20, 0, 5, 3, 130, 110, 0, 0, 0, 0]

}]

});

</script>

</head>

<body>

</body>

</html>

0 0