您的位置：首页 > 其它

Highcharts绘制直线图

2012-09-17 17:02 316 查看

1.Highcharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。

2.Highcharts绘制直线图

1）先看下绘制直线的效果

2)绘制直线的js文件--chart_line.js：

var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_line',//图表放置的容器--Div
defaultSeriesType: 'line',//图表类型line(折线图)
},
title: {
text: null //图表标题，这里设置为空，可以根据自己的需求设置内容
},
credits:{enabled:false},
legend:{enabled:false},
xAxis: {//x轴
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F','S','S'],//x轴标签名称
gridLineWidth: 0,//设置网格宽度为1
lineWidth: 2,//基线宽度
labels:{align:'left'},
plotBands: [{//数据块显示,可以根据from,to属性绘制数据块
color: '#A8A8A8',
width: 2,
value: 4,
label: {
text: 'Today',
style: {color: 'black',font:'normal 11px Verdana, sans-serif' },
align: 'center',
textAlign:'center',
rotation: 360,
verticalAlign:'bottom',
y:25
}
}]
},
yAxis: {
title: {text: 'Money',align: 'high',offset:-45,rotation: 0,y:-2,x:-15,style: {color: 'black',font:'normal 11px Verdana, sans-serif' }},
lineWidth: 2,

gridLineWidth: 0,
tickPixelInterval:40,
labels: {
formatter: function() {//去掉Y轴的刻度显示
return '';
}
},
plotBands: [{
color: '#A8A8A8',//设置数据块的颜色
width: 2,
value: 24,
label: {
text: 'Limit',
style: {color: 'black',font:'normal 11px Verdana, sans-serif' },//设置数据块对应字体颜色
align: 'right',
textAlign:'right',
verticalAlign:'bottom',
x: 0
}
}]
},
plotOptions:{//设置数据点
line:{
dataLabels:{
enabled:false //在数据点上不显示对应的数据值
},
enableMouseTracking: true //取消鼠标滑向触发提示框
}
},
series: [{//数据列
name: 'Lower',
data: [{y:5,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 20,marker:{enabled: false}},null,null,null,null,null,null,null,null,null],
color:'green'
},{
name: 'Middle',
data: [null,null,null,null,{y: 20,marker:{enabled: false}}, {y: 21,marker:{enabled: false}}, {y: 22,marker:{enabled: false}},{y: 23,marker:{enabled: false}},{y: 24,marker:{enabled: false}},null,null,null,null,null],
color:'#FF8000'
},{
name: 'High',
data: [null,null,null,null,null, null, null, null,{y: 24,marker:{enabled: false}},{y: 25,marker:{enabled: false}},{y: 26,marker:{enabled: false}},{y: 27,marker:{enabled: false}},{y: 28,marker:{enabled: false}},{y: 29,marker:{enabled: false}}],
color:'#FF0000'
}
]
}); //通过marker控制线上的点是否显示
});

3）HTML对应的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Line Card</title>
<link type="text/css" href="css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/chart_line.js">
</script>
</head>
<body>
<div id="chart_line" style="width:400px; height: 300px" align="left">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航