highcharts 使用
highcharts 图形报表工具 最近公司开发需要用到报表 在网上查询了api 研究研究 更多请看：http://www.hcharts.cn/api/index.php#yAxis.title.text
<!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=gbk" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="highcharts.js"></script> </head> </style> <body> <!--div 显示滚动条--> <!-- <div style=" overflow: auto; width: 1000px; border:1px solid red;"></div> --> <div id="container" style="width:999px;border:1px solid red;"></div> </body> </html>
$(function () {
//#container 显示的div 内容id
$('#container').highcharts({
chart: {
type: 'line'
},
//标题
title: {
text: 'highcharts',
x:-20 //center 标题显示的位置 -20 居中
},
//副标题【可选项】
subtitle: {
text: 'charts',
x: -20
},
//x轴
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
/*
tickColor:'red',//【坐标线颜色】
tickInterval:1,//【坐标密度】
tickLength:1,//【坐标长度】
tickPixelInterval:1,
gridLineWidth:0.1,//【网格粗细】
gridLineColor:'red',//【网格颜色】
gridLineDashStyle:'Solid',//【线条样式】
lineColor:'red',*/
//标签样式
labels:{
//是否启用xAxis轴【false则不启用】
enabled:true,
rotation:-25,//旋转
//overflow:'auto',
//设置字体样式
style: {
color: 'black',//字体颜色
fontWeight: 'bold'//字体样式
}
}
},
//y轴
yAxis: {
title: {//y轴标题名称
text: 'charts',
style:{color:'blue'}
},
//标线属性
plotLines: [{
value: 0,
width: 1,
color: 'red'
}],
//gridLineWidth:0.1,//【网格粗细】
//gridLineColor:'red',//【网格颜色】
//gridLineDashStyle:'Solid',
//tickInterval:0.5,//自定义刻密度
min:2,//纵轴最小值
labels:{
/*formatter:function(){
if(this.value <=5) {
return "低("+this.value+")";
}else if(this.value >10 && this.value <=30) {
return "中("+this.value+")";
}else {
return "低("+this.value+")";
}
},*/
//设置字体样式
style: {
color: 'black',//字体颜色
fontWeight: 'bold'//字体样式
}
}
},
//数据提示框【可选项】
tooltip: {//鼠标移上去显示的单位 不需要时把它删除即可注释也行
valueSuffix: '°C',
enabled:true, //设置不可用 启用设为true 即可
backgroundColor:'red'
},
//图例【可选项】
legend: {
layout: 'vertical',//布局的方法 这儿跟下面的name：值对应着关心 在什么位置显示
align: 'right',//对其方法
verticalAlign: 'middle',//垂直对其居中
borderWidth: 0 ,//边框宽度
backgroundColor:'white',//背景颜色
borderColor:'red',//边框颜色
borderWidth:1,
enabled:true,//是否可用
},
//图形选项
plotOptions : {
//线
line : {
//数据标签
dataLabels : {
enabled : true,//点上是否显示数字
color:'red',//设置字体颜色
style:{//设置样式
fontWeight: 'bold'//字体样式
}
},
marker : {
enabled : true,//是否显示点
radius : 4,//点的半径
fillColor: '#FF9900',//点填充色
//fillColor: 'red'//点填充色
//lineWidth:2
},
cursor:'pointer',
enableMouseTracking : false,
stickyTracking : true,//跟踪
visible : true,
lineWidth : 1,//线宽
lineColor:'#339933'//曲线图颜色
//线条粗细
// pointStart:100,
}
},
//版权信息【可选项】
credits:{
/*
禁用版权信息（默认为true 改为false即可禁用） 每一个
highcharts的右下角都有一个连接到highcharts.com的位置
也可以自己定义
*/
enabled:true,
href:'http://lqi.iteye.com',
position: {//position 对象
align: 'right',//对其位置
x: -10,//x轴位置
verticalAlign: 'bottom',//垂直对其底部
y: -5 //y轴
},
style: {
cursor: 'pointer',//鼠标放上去的放上
color: 'red',//字体颜色
fontSize: '10px'//字体大小
},
text:'blog.com'
},
//数据列
series: [{
//图例名称
name: 'lvod',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5,
23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6,
14.2, 10.3, 6.6, 4.8]
}, {
name: 'London',
data: [3.2, 4.3, 5.1, 6.5, 21.9, 5.2, 7.0, 1.6,
4.2, 1.3, 2.6, 2.8]
}]
});
});