<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="<%=basePath%>js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="<%=basePath%>js/highcharts.js"></script> </head> <body> <script type="text/javascript"> $(function() { var chart; $(document).ready(function() { var options = { chart: { renderTo: 'container',//图表的页面显示容器 defaultSeriesType: 'spline',//图表的显示类型(line,spline,scatter,splinearea bar,pie,area,column) marginRight: 125,//上下左右空隙 marginBottom: 25 //上下左右空隙 }, title: { text: '室内/室外温度实时采集图表',//主标题 x: -20 //center }, subtitle: { text: 'develop by:Sammy',//副标题 x: -20 //center }, xAxis: { //横坐标 }, yAxis: { title: { text: '温度' //纵坐标 }, plotLines: [{ //标线属性 value: 0, width: 1, color: 'red' }] }, tooltip: { //数据点的提示框 formatter: function() { //formatter格式化函数 return '<b>'+ this.series.name +'</b><br/>'+ this.y +'°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] }; jQuery.get('http://localhost:8080/testChart/pp.do',function(data){ //var data = "{name: 'Tokyo',data: [[1283644800000,966],[1283731200000,2475],[1283817600000,3336],[1283904000000,1316]]},{name: 'New //York',data:[[1283644800000,433],[1283731200000,983],[1283817600000,1463],[1283904000000,1316]]}"; var data = eval("["+data+"]"); var da = eval("[{categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}]") options.xAxis=da[0]; for(var i=0;i<data.length-1;i++){ options.series.push(data[i]); } chart = new Highcharts.Chart(options); }); }); }) </script> <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> </body> </html>
相关推荐
最近在做highcharts图标,整理了个Highcharts的使用案例,挺不错的
ng2-highcharts, Angular2库使用Highcharts跳出盒子 ng2-highcharts 更改从 0. x. x 到 1. x. x: KeyValueDiffer 类型已经更改为 KeyValueDiffer, type> 并且它打破了构建,因此在 4.0.0之前
使用Highcharts结合PHP与Mysql生成饼状图 为了更好的讲解,实例中在Mysql数据库中建立一张表chart_pie,用于表示各搜索引擎带来的访问量,表中分别有id、title和pv三个字段,id是自增长整型、主键;title表示搜素...
jquery Highcharts jquery Highcharts jquery Highcharts
highcharts--基本使用手册(中文API).doc
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
highcharts示例代码,用来实现各种图表展现,数据组合快,对应图表种类多。
资源名称:使用Highcharts快速开发报表 中文WORD版内容简介:Highcharts是一个纯Javascript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,...
论坛找的,里面有php版本三层架构小案例,store啥的自动绑定,太爽了
Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...
• 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; • 提示功能:鼠标移动到图表的某...
资源名称:Highcharts使用说明 中文WORD版内容简介:Highcharts是一个跨浏览器的Javascript图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能,只需要...
HighCharts后台交互数据模板,使用Ajax交互传递数据,显示图示
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图,让数据更加的明显美观,可以满足绝多数数据报表的需求!
highcharts用法学习文档,参照官网摘录了主要使用方法编写的学习文档
但是微信小程序不支持 DOM,并且没有暴露 SVG 相关的接口,所以截止到目前,我们无法直接在小程序中使用 Highcharts。 好消息是微信小程序开放了 Web-view 能力,也就是说支持网页嵌入。所以目前我们可以以嵌入...
说明对highcharts图形报表环境配置做了说明,已经线型图,柱状图和饼状图中主要属性做了详细注释。
LazyHighCharts - 一个简单和非常灵活的方式从ruby代码使用HighCharts,经测试支持 Ruby on Rails, Sinatra 和Nanoc。
highcharts 与 struts2 完美整合,解决部分新手对于操作highcharts的误区,本例子无需连接数据库,在strust2 Action中创建模拟数据,以json的方式返回到前台js,highcharts通过解析json,进而完成数据的装配,且可以...
Highcharts+PHP+Mysql生成饼状统计图