Highcharts绘制直线图

1.Highcharts简介

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

2.Highcharts绘制直线图

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

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

[javascript]  view plain copy

1. var chart;   
2. $(function() {   
3.     chart = new Highcharts.Chart({   
4.         chart: {   
5.             renderTo: 'chart_line',//图表放置的容器--Div  
6.             defaultSeriesType: 'line',//图表类型line(折线图)  
7.         },   
8.         title: {   
9.             text: null //图表标题，这里设置为空，可以根据自己的需求设置内容  
10.         },   
11.         credits:{enabled:false},  
12.         legend:{enabled:false},  
13.         xAxis: {//x轴  
14.             categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F','S','S'],//x轴标签名称  
15.             gridLineWidth: 0,//设置网格宽度为1  
16.             lineWidth: 2,//基线宽度  
17.             labels:{align:'left'},  
18.             plotBands: [{//数据块显示,可以根据from,to属性绘制数据块  
19.                 color: '#A8A8A8',  
20.                 width: 2,  
21.                 value: 4,  
22.                 label: {  
23.                     text: 'Today',  
24.                     style: {color: 'black',font:'normal 11px Verdana, sans-serif' },  
25.                     align: 'center',  
26.                     textAlign:'center',  
27.                     rotation: 360,  
28.                     verticalAlign:'bottom',  
29.                     y:25  
30.                 }              
31.             }]  
32.         },   
33.         yAxis: {  
34.             title: {text: 'Money',align: 'high',offset:-45,rotation: 0,y:-2,x:-15,style: {color: 'black',font:'normal 11px Verdana, sans-serif' }},  
35.             lineWidth: 2,  
36.               
37.             gridLineWidth: 0,  
38.             tickPixelInterval:40,  
39.             labels: {  
40.                 formatter: function() {//去掉Y轴的刻度显示  
41.                     return '';  
42.                 }  
43.             },  
44.             plotBands: [{  
45.                 color: '#A8A8A8',//设置数据块的颜色  
46.                 width: 2,  
47.                 value: 24,  
48.                 label: {  
49.                     text: 'Limit',  
50.                     style: {color: 'black',font:'normal 11px Verdana, sans-serif' },//设置数据块对应字体颜色  
51.                     align: 'right',  
52.                     textAlign:'right',  
53.                     verticalAlign:'bottom',  
54.                     x: 0  
55.                 }              
56.             }]  
57.         },   
58.         plotOptions:{//设置数据点  
59.             line:{   
60.                 dataLabels:{   
61.                     enabled:false //在数据点上不显示对应的数据值  
62.                 },   
63.                 enableMouseTracking: true //取消鼠标滑向触发提示框  
64.             }  
65.         },   
66.         series: [{//数据列  
67.             name: 'Lower',   
68.             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],  
69.             color:'green'  
70.         },{   
71.             name: 'Middle',   
72.             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],  
73.             color:'#FF8000'  
74.         },{   
75.             name: 'High',   
76.             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}}],  
77.             color:'#FF0000'  
78.         }  
79.         ]  
80.     }); //通过marker控制线上的点是否显示  
81. });   

3）HTML对应的内容：

[html]  view plain copy

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