注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

技术行者

时代的车轮在按照摩尔定律滚动。

 
 
 

日志

 
 

JQuery Highcharts图表控件  

2012-01-13 13:28:00|  分类: web开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

下载地址(自行选择最新版本):

jquery  http://docs.jquery.com/Downloading_jQuery

Highcharts  http://www.highcharts.com/

使用非常简单:

将对应的js包include进来后,就可以使用了,下面是一个典型的例子。

效果图:

JQuery Highcharts图表控件 - hansionxu - 技术的天空

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Highcharts Example</title>

<!-- 1. Add these JavaScript inclusions in the head of your page -->

<script type="text/javascript" src="../js/min.js"></script>

<script type="text/javascript" src="../js/highcharts.js"></script>

<!-- 1a) Optional: add a theme file -->

<!--

<script type="text/javascript" src="../js/themes/gray.js"></script>

-->

<!-- 1b) Optional: the exporting module -->

<script type="text/javascript" src="../js/modules/exporting.js"></script>

<!-- 2. Add the JavaScript to initialize the chart on document ready -->

<script type="text/javascript">

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'line',

marginRight: 130,

marginBottom: 25

},

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

formatter: function() {

               return '<b>'+ this.series.name +'</b><br/>'+

this.x +': '+ this.y +'°C';

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

series: [{

name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'New York',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

}, {

name: 'Berlin',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

});

</script>

</head>

<body>

<!-- 3. Add the container -->

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>

</html>

 

1.chart:

renderTo 图表的页面显示容器

defaultSeriesType 图表的显示类型(line,spline, scatter, splinearea bar,pie,area,column)

margin 上下左右空隙

events 事件

click function(e) {}

load function(e) {}

 

2.xAxis:yAxis:

属性:

gridLineColor 网格颜色

reversed 是否反向 true ,false

gridLineWidth 网格粗细

startOnTick 是否从坐标线开始画图区域

endOnTick 是否从坐标线结束画图区域

tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between

tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)

tickPixelInterval 决定着横坐标的密度

tickColor 坐标线标记的颜色

tickWidth 坐标线标记的宽度

lineColor 基线颜色

lineWidth 基线宽度

max 固定坐标最大值

min 固定坐标最小值

plotlines 标线属性

maxZoom

minorGridLineColor

minorGridLineWidth

/minorTickColor

title: 

enabled: 是否显示

text: 坐标名称

Labels 坐标轴值显示类 默认:defaultLabelOptions

formatter 格式化函数

enabled 是否显示坐标轴的坐标值

rotation 倾斜角度

align 与坐标线的水平相对位置

x 水平偏移量

y 垂直偏移量

style 

font 字体样式 默认defaultFont

color 颜色

3.Tooltip 数据点的提示框

enabled 鼠标经过时是否可动态呈现true,false

formatter 格式化提示框的内容样式

 

4.plotOptions 画各种图表的数据点的设置

defaultOptions 默认设置

属性

Area类:

lineWidth 线宽度

fillColor area的填充颜色组

marker{} 设置动态属性

shadow 是否阴影 true,false

states 设置状态?

Line类

dataLabels: 数据显示类

enabled 是否直接显示点的数据true,false

5.series

name 该条曲线名称

data[] 该条曲线的数据项

addPoint([x,y],redraw,cover) 添加描点,redraw 是否重画,cover是否左移

setData: function(data, redraw) 重新设置Data数组,redraw是否重画

remove: function(redraw) 删除曲线

redraw: function() 重画曲线

marker :

enabled 是否显示描点



  评论这张
 
阅读(322)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017