完整的highchart例子

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

<!-- highstock.js包含了highchart.js的相关功能 -->

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

<!-- <script type="text/javascript" src="js/highchart.js"></script> -->

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

<script type="text/javascript">

 

$(function () {

 

//设置当前页面图形的全局属性

Highcharts.setOptions({

chart:{

backgroundColor:{

linearGradient:[100,100,500,500],

stops:[//配置整个被渲染的div的颜色，这里是一个渐变色的配置

[0,'rgb(255,0,255)'],

[1,'rgb(255,240,255)']

]

},

borderWidth:0,

plotBackgroundColor:'rgba(110,200,150,9)',//图形背景颜色

plotShadow:true,

plotBorderWidth:1

}

});

 

   var option = {

   chart:{

   renderTo:'container',

   type:'column'//图标类型  line, spline, area, areaspline, column, bar, pie , column，scatter

   },

   title:{

   useHTML:true,//要使得html标签有效时，必须设置该属性

   text:"Highcharts中文网 | <a href='http://www.hcharts.cn' target='_blank'>中文教程</a>",

   style:{

       color:"#fff",

       fontWeight:"bold"

   }

   },

   //配置副标题

            subtitle:{

           text:'这里是附标题',

           y:40 //在y轴方向的距离间隔

            },

   //配置链接及名称选项，除去了默认的highchart显示

            credits:{

           enabled:true,

           href:'http://baidu.com',

           text:'百度一下，你就知道'

            },

   xAxis:{

   categories:['Apple','Oracle','bananas']

   },

   yAxis:{

   title:{

   text:'fruit display' //不设置的话默认显示values

   },

   labels:{

   formatter:function(){

   return this.value+'千克';//y轴刻度的修饰

   }

   }

   },

   //配置数据点提示框

            tooltip:{

           crosshairs:true,

           shared:false

            },

            

            plotOptions: {

                column: {  

                    pointPadding: 0.2,  //图表柱形的 间距 

                    borderWidth: 1      //图表柱形的边框

                }, bar: {  

                    dataLabels: {  

                        enabled: true  

                    }  

                }  

            }, 

                

   series: [{

name: 'tomgreen',

data: [1, 2, 4] //这里的数据是和 xAxis的categoryies属性值是一致的

},{

name: 'John',

data: [5, 7, 3]

}]

   };

   //JavaScript对象中,点符号和方括号是一样的，因此，你可以通过他们的字符串名称访问所有成员。

   //在代码中可以是options.renderTo，也可以是options['renderTo']

   //自定义对象，也可以通过new Object的形式，再设置Object的name和data属性

   var dynamicArr = {

   name:'dynamic add ',

   data:[11,11,22]

   }

   //动态添加option属性内容

   //要使得动态添加的内容能展现在图形上，需要在图形渲染之前添加

   option.series.push(dynamicArr);

   //绘制图形，返回对象之后，可以动态修改图形的参数

   var chartObject = new Highcharts.Chart(option);

});

 

</script>