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] }] }); });
时间: 2024-09-27 22:37:53