前台显示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
$("input[type=button]").bind("click",showChart);
});
var chart;
function showChart(){
$.ajax({
url:'/t/highcharts',
type:'post',
dataType:'json',
success:function(data){
var json = eval(data);
if(json!="" && json!=null){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: ''
},
xAxis: {
categories: json.categories
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
min:0
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' 元';
}
},
series: json.series
});
}
},
error:function(){
alert('error!');
}
});
}
</script>
</head>
<body>
<div style="margin:auto;text-align:center;">
<div style="padding:10px;"><input type="button" value=" Test Highcharts "/></div>
<div id="container" style="height:480px;width:980px;background-color:#efefef;"> </div>
</div>
</body>
</html>
后台数据
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
/**
* @author showlike
* @version v1.0
* 2012-8-16 下午5:20:51
*/
public class ShowChart extends HttpServlet{
private static final long serialVersionUID = 3481044698564977772L;
@SuppressWarnings({ "unchecked", "rawtypes" })
public void service(HttpServletRequest request,
HttpServletResponse response){
List data1 = new ArrayList();
List data2 = new ArrayList();
List date = new ArrayList();
List data = new ArrayList();
Map map1 = null;
Map map2 = null;
Map map = new HashMap();
data1.add(7.0);
data1.add(6.9);
data1.add(9.5);
data1.add(14.5);
data1.add(18.2);
data1.add(21.5);
data2.add(0.2);
data2.add(0.8);
data2.add(5.7);
data2.add(11.3);
data2.add(17.0);
data2.add(22.0);
date.add("2012-01-01");
date.add("2012-03-03");
date.add("2012-05-01");
date.add("2012-08-01");
date.add("2012-10-01");
date.add("2012-11-11");
map1 = combinationSeriesData("Tokyo", data1);
map2 = combinationSeriesData("New York", data2);
data.add(map1);
data.add(map2);
map.put("categories",date);
map.put("series", data);
JSONObject json = new JSONObject();
json.putAll(map);
try {
response.getWriter().print(json);
} catch (IOException e) {
e.printStackTrace();
}
}
@SuppressWarnings({ "rawtypes", "unchecked" })
public Map combinationSeriesData(String name,List data){
Map map = new HashMap();
map.put("name", name);
map.put("data", data);
return map;
}
}
最终效果
分享到：
相关推荐
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...
Highcharts是一个制作图表的Javascript类库，主要特性： 1、提示功能：鼠标移动到图表的某一点上有提示信息 2、放大功能：选中图表部分放大，近距离观察图表 3、对个人用户完全免费，这一点很重要的 4、兼容性：...
Highcharts几种简单的示例,仅供参考
客户需要图表界面。经过本人研究改进，现将基于jquery的highcharts与大家分享。支持中文 对返回的map解析 界面简洁 美观 可以动态传参数 仅需要加载4个js文件。demo可以到主页上下载。不过本人下载的最新版本一直有...
Highcharts中文帮助文档（带例子） Chart 图标区选项 Chart图表区选项用于设置图表区相关属性。 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置...
下面小编就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
各种图表js加实例，highcharts实例，使用说明
主要为一些具状 饼状 等图表的插件，附带代码以及应用实例，Highcharts Examples
如何获得图表实例？ 如何添加模块？ 如何将React组件添加到图表元素？ 入门 一般先决条件 确保您的节点， NPM和React是最新的。 经过测试和要求的版本： node 8.11.3+ npm 6.4.1+或类似的软件包管理器 此包装...
1. 前台echarts图表依赖js文件： echarts.js 下载地址 ：http://echarts.baidu.com/download.html jquery-1.11.2.min.js jquery依赖js文件 2.前台页面： 引用echarts.js、jquery-1.11.2.min.js 编写图表：
目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似，echarts 也不能通过 Vue...
用于 node.js 的 Highcharts 是一个 WebServer 模块，它在本地主机上运行并将典型的 Highcharts 图形呈现为 base64 PNG 字符串。 欢迎所有贡献。 简单的API 类别：Highcharts Highcharts 有以下方法。 新的 ...
Js图表 jQuery highcharts 动感统计曲线图生成插件，它能以动画形式生成曲线图、柱状图、饼图等许多统计图形，还有一些更复杂的图形highcharts也能帮你完成，确实挺不错的，而且压缩包内收集了很多这方面的应用实例...
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧...
Highcharts是一个用纯JavaScript编写的图表库，它提供了一种将交互式图表添加到您的网站或Web应用程序的简便方法。 Highcharts当前支持折线，样条线，面积，面积线，柱状图，条形图，饼图，散点图，角规，arearange...
使用 Highcharts 添加数据可视化图表莫里斯.js 15 个最佳 JavaScript 图表库 第 9 周 - 外部工具使用 Mailgun示例发送电子邮件 第 8 周 - 部署到 EC2 准备 Ubuntu 14.04 EC2 实例安装 Nginx、MongoDB、Node.js、NPM ...
光荣的海图实例 看起来好像是您从1980年代到今天的Guardian / ICM民意测验的平均高位图表，但将鼠标悬停在该图表上就变得有些邪恶。 （但是，更糟糕的是代码…… ¯\_(ツ)_/¯ ）
您可能感兴趣的文章:HighCharts图表控件在ASP.NET WebForm中的使用总结（全）水晶报表asp.net的webform下基本用法实例WebForm获取checkbox选中的值(几个简单的示例)js脚本获取webform服务器控件的方法Ajax Throws ...