http://runjs.cn/code/ih5xzoeb
highcharts跟后台交互的demo
highcharts跟后台如何进行交互小demo,一个servlet,一个jsp页面,servlet用来往jsp页面输出数据,后台数据是随便写的,你可以根据需要改成自己需要的数据。
我这里的servlet往前台传的数据是字符串,然后在前台用js处理成json对象的,也可以往前台直接传json对象,我这里为了简单起见采用输出字符串。不多说了 上代码:
servlet:
package com.highcharts.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name="lineServlet",urlPatterns="/lineServlet")
public class LineServlet extends HttpServlet {
private static final long serialVersionUID = 366512729238484827L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
List data = new ArrayList();
for(int i = 1; i < 10; i++){
data.add(i);
}
List ll = new ArrayList();
for(int i=0; i <10; i++){
ll.add("\"data"+i+"\"");
}
String str = "";
str += "{\"title\":\"this is demo\",\"data\":"+data+",\"xAxis\":"+ll+"}";
out.println(str.toString());
out.flush();
out.close();
}
}
jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="highchart/highstock.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "lineServlet",
type: "GET",
success: function(data){
console.debug(data)
var a = eval_r('(' + data + ')');
console.debug(a);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: a.xAxis
},
title : {
text : a.title
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions: {
},
series: [{
data: a.data
}]
});
}
});
});
</script>
</html>
分享到:
相关推荐
Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用 Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用
highcharts的常用配置,后台数据的交互。数据的下钻,已经导出相关配置,返回按钮配置。堆叠图,加折线图,展示环比增量。包含内容丰富,
highcharts简单的饼图demo,按照需求更改
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
highcharts demo各种图形,可以与后台交互,
项目使用过程中的总结,highcharts属性说明及demo,可设置纵坐标范围,修改纵坐标名称,添加点击事件
版本虽然有点老,但相对于离线帮助文档来说已经够用了
这个里面有关于HighCharts的一些API文档,以及一些小的Demo还有一些属性截图,方便大家使用及学习
HighCharts后台交互数据模板,使用Ajax交互传递数据,显示图示
highcharts读后台php,生成动态图表.php文件可以根据需要改写,从数据库中读取实时数据.很适合生成动态监控系统或实时交易系统的网页,生成的图表可以毫无问题的在移动设备上显示。
highcharts小demo
整理了一天终于整理出了异步请求json对象并转化为highcharts的对象数据,绝对实用
这是highcharts的一个简单demo,主要是以时间作为X轴来实现的
可实现 highcharts 和 数据库交互。内附:效果图及相关js
Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等; 2.图表类型众多:...
highcharts 导出图片 .net c#Demo例子
highcharts_demo,highcharts_demo,highcharts_demo,highcharts_demo
unigui_highcharts_Demo
Highcharts line Demo
HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...