完整的highchart例子
ghostsk 2015-03-04
<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>
