highcharts 使用

来源：互联网发布：java ipad微信发送编辑：程序博客网时间：2024/04/28 11:32

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]}]});});

0 0