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]
}]
});
});
相关推荐
资源名称：Highcharts使用说明 中文WORD版内容简介：Highcharts是一个跨浏览器的Javaｓｃｒｉｐｔ图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要...
这个“HighCharts使用案例代码”压缩包显然是一个包含具体示例的资源集合，对于学习和理解如何在实际项目中应用HighCharts非常有帮助。 首先，HighCharts的基本使用步骤包括以下几点： 1. **引入HighCharts库**：...
以下是对`highcharts使用说明及demo`的详细解读： 1. **基本配置**：在使用Highcharts时，首先需要在HTML文件中引入Highcharts的JavaScript库。通常，这可以通过在`<head>`标签内添加链接到Highcharts CDN的`...
Highcharts使用说明 Highcharts是基于JavaScript的图表库，主要用于在Web页面上显示各种类型的图表，如线状图、柱状图、饼状图等。Highcharts库提供了非常灵活的配置选项，使得开发者可以根据需要自定义图表的样式...
完整的Highcharts使用手册,有丰富的实例，可以直接复制使用
网页图表Highcharts实践教程基础篇主要涵盖了如何使用Highcharts库创建和定制各种图表，以便在网页上呈现数据。Highcharts是一款强大的JavaScript库，专为Web开发者设计，用于生成高质量的数据可视化图表。它支持...
以下是对Highcharts图形报表的使用说明和关键知识点的详细解释： 1. **引入依赖库**： 在使用Highcharts之前，首先需要引入必要的JavaScript库。`jquery.js`是jQuery框架，Highcharts是基于jQuery构建的，因此需要...
在本教程中，我们将学习如何使用Highcharts制作一个简单的柱状图。首先，确保你已经正确地安装了Highcharts库，这是开始创建图表的前提。 **步骤一：创建HTML容器** 在HTML文档中，我们需要添加一个`div`元素作为...
这个压缩包包含了一系列的Highcharts使用案例，对于前端开发者来说，是非常宝贵的参考资料。 首先，我们来详细了解Highcharts的基本概念。Highcharts是一个基于纯JavaScript的开源图表库，它可以方便地与HTML5和SVG...
**Highcharts.js 使用详解** Highcharts.js 是一个流行的JavaScript...通过阅读《Highcharts使用说明.doc》文档，你将能深入理解Highcharts的各个方面，从基本用法到高级功能，帮助你更好地利用这个库进行数据可视化。
本教程将聚焦于如何使用Highcharts结合AJAX技术，实现图表数据的远程加载，从而达到无刷新更新图表的效果。 首先，我们需要理解Highcharts的基本结构。Highcharts的核心是`Highcharts.Chart`对象，通过这个对象我们...
4. **gfx** - 这个目录可能存储了Highcharts使用的图形资源，如图标或者默认的符号，这些资源可以用于自定义图表的外观。 5. **api** - 这部分通常包含Highcharts的API文档，它详尽地解释了各种选项、方法和事件，...
在默认情况下，Highcharts使用一个基于服务器的导出服务，将图表转换为图像或PDF。然而，"客户端导出"功能消除了对服务器的依赖，所有处理都在用户的浏览器内部完成。这减少了网络延迟，使得导出过程更加迅速，尤其...
5. **传递数据**：使用OGNL从Action将数据传递到JSP页面，供Highcharts使用。 6. **测试与调试**：运行项目，验证图表的显示和交互效果是否符合预期。 通过"Highcharts Struts Demo"，开发者可以学习到如何在Java ...
### 报表HighCharts使用教程 #### 一、HighCharts简介 HighCharts是一款非常流行的JavaScript图表库，它基于SVG（可缩放矢量图形），在旧版本浏览器中使用VML（Vector Markup Language）作为后备方案。HighCharts...
Highcharts Standalone框架专为那些不在其网页中已经使用jQuery、MooTools或Prototype的用户设计，旨在减少使用Highcharts的额外负担。Highcharts和Highstock（另一个基于Highcharts的图表解决方案）在所有现代...