前台显示
<!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是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建出各种美观的数据可视化图形，如柱状图、曲线图和饼状图等。本实例是关于如何结合PHP和MySQL数据库，利用Highcharts进行动态数据...
Highcharts是一款强大的JavaScript库，用于在网页上创建各种交互式图表。它支持多种图表类型，如折线图、柱状图、饼图、散点图等，为数据可视化提供了丰富的选择。本实例详解将深入探讨如何使用Highcharts来构建高...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者轻松地在网页上创建各种交互式的图表，如折线图、柱状图、饼图、散点图等。这个"Highcharts生成图表所需源码包"包含了两个核心文件：...
Highcharts是一款基于JavaScript的开源图表库，用于在Web应用程序中创建高质量、交互式的统计图表。它与jQuery库兼容，使得开发者能够轻松地将数据可视化功能整合到jQuery项目中。本资源包含了一系列关于jQuery ...
Highcharts是一款功能强大的纯JavaScript图表库，它允许开发者通过简单的JSON数据来创建各种直观、美观的图表，包括柱状图、曲线图、饼图等多种类型。这个插件无需依赖任何其他重型库，如jQuery，因此它能保持轻量级...
Highcharts是一款基于JavaScript的开源图表库，用于在Web应用程序中创建高质量、交互式的图表。它兼容各种浏览器，包括IE6+、Firefox、Chrome、Safari和Opera等，且支持响应式设计，能在桌面端和移动端均能良好显示...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它与jQuery库紧密结合，提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，用于数据可视化。Highcharts以其灵活性、高性能和易用性深受开发者喜爱...
Highcharts是一款强大的JavaScript图表库，用于在Web上创建交互式、动态的数据可视化图表。它支持各种图表类型，如柱状图、折线图、饼图、散点图等，广泛应用于数据分析、报告展示和信息传递等领域。这个"highcharts...
例如，首先需要在HTML中引入Highcharts的JS和CSS文件，然后通过`Highcharts.chart()`方法创建图表实例，传入容器ID和配置对象。配置对象中可以设置图表的标题、副标题、x轴和y轴的标签、数据系列、颜色、图例等参数...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，如折线图、柱状图、饼图、散点图等。本压缩包"Highcharts-2.3.2"包含了Highcharts 2.3.2版本的源码和...
综上所述，"highchartsJS插件（有源码）"提供了强大的数据可视化工具，结合SVG和jQuery，使得开发者能够创建出既美观又交互性强的图表，适应多种业务需求。通过深入学习和实践，开发者可以利用Highcharts实现复杂的...
这些JavaScript图表实例通常包含HTML、CSS和JavaScript代码，通过导入相关库，设置数据源和配置项来创建和定制图表。例如，Chart.js的使用步骤可能包括： 1. 引入Chart.js库：在HTML文件中添加库的CDN链接或者本地...
HighCharts.js是一款强大的JavaScript图表库，专用于创建各种交互式的数据可视化图表，如饼状图、柱状图、线图、区域图、散点图、热力图等。这款库在Web开发中广泛使用，特别是在需要展示复杂数据或统计数据的场合，...
Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果。它支持多种图表类型，如散点图、区域图、柱状图、折线图和饼状图等，且具有高度自定义和交互性。下面我们将详细介绍这些图表类型...
在"js生存图表charts"的压缩包中，可能包含了这些库的示例代码或者教程，你可以通过学习和实践，掌握创建JavaScript图表的基本技巧和高级特性。这些实例可以帮助你理解如何将JavaScript与图表库结合，实现数据可视化...
Highcharts是一款强大的JavaScript图表库，主要用于在Web应用中创建各种数据可视化效果。在这个"Highcharts-3.0.0 经典图表例子"压缩包中，用户可以找到多个示例，展示如何使用Highcharts 3.0版本来构建各种类型的...
Highcharts是一款强大的JavaScript库，用于创建各种交互式图表，而将这些图表集成到Word文档中可以方便报告和分析的分享。以下是实现这一功能的关键步骤和涉及的技术。 首先，我们需要引入一些依赖库来处理导出过程...
然后通过JavaScript创建图表实例，设置图表的配置项，如标题、数据、系列类型等。 - **3.3. 后台代码**：在服务器端，可以通过各种编程语言（如PHP、ASP.NET、Java）处理数据，并以JSON格式返回给前端。前端...