转自:http://lqi.iteye.com/blog/2147182 <!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是一个跨浏览器的Javascript图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。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使用`Exports.highcharts.com`进行图片导出。如果需要自定义导出服务器,需要修改`exporting.url`属性,指向自己的导出服务接口。此外,为了防止中文乱码问题,可能还需要对导出过程进行特殊...
以下是对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的图表解决方案)在所有现代...
例如,可以使用jQuery或其他工具获取JSON数据,然后将其转化为JavaScript数组供Highcharts使用。 Highcharts还支持图表反转或轴反转,以及标签旋转,这使得即使在复杂的数据环境下,图表仍然保持清晰易读。通过以上...