1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Highcharts Example---基本的曲线图</title>
6
7 <!-- 1.引入jquery库 -->
8 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
9 <!-- 2.引入highcharts的核心文件 -->
10 <script type="text/javascript" src="js/highcharts.js"></script>
11 <!-- 3.引入导出需要的js库文件 -->
12 <script type="text/javascript" src="js/exporting.js"></script>
13
14 <!--4.js脚本-->
15 <script type="text/javascript">
16
17 var chart;
18 $(document).ready(function() {
19 chart = new Highcharts.Chart({
20 chart: {
21 renderTo: 'container',
22 defaultSeriesType: 'line',//图表类别，可取值有：line、spline、area、areaspline、bar、column等
23 marginRight: 130,
24 marginBottom: 25
25 },
26 title: {
27 text: '襄阳(一级标题)',//设置一级标题
28 x: -20 //center
29 },
30 subtitle: {
31 text: '2011温度各区对比(二级标题)',//设置二级标题
32 x: -20
33 },
34 xAxis: {
35 categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6',
36 '2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//设置x轴的标题
37 },
38 yAxis: {
39 title: {
40 text: '温度 (°C)'//设置y轴的标题
41 },
42 plotLines: [{
43 value: 0,
44 width: 1,
45 color: '#808080'
46 }]
47 },
48 tooltip: {
49 formatter: function() {
50 return '<b>'+ this.series.name +'</b><br/>'+
51 this.x +': '+ this.y +'°C';//鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
52 }
53 },
54 legend: {
55 layout: 'vertical',
56 align: 'left',//设置说明文字的文字 left/right/top/
57 verticalAlign: 'top',
58 x: -10,
59 y: 100,
60 borderWidth: 0
61 },
62 exporting:{
63 enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
64 },
65 plotOptions: {
66 line: {
67 dataLabels: {
68 enabled: true //显示每条曲线每个节点的数据项的值
69 },
70 enableMouseTracking: false
71 }
72 },
73 series: [{
74 name: '襄城',//每条线的名称
75 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]//每条线的数据
76 }, {
77 name: '樊城',
78 marker:{
79 symbol:"square"
80 },
81 data: [{
82 y:-3,
83 marker:{
84 symbol:'url(sun.png)'//在线上的某个点显示图标
85 }
86 }, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
87 }, {
88 name: '襄州',
89
