`
ITCheng
  • 浏览: 77215 次
  • 来自: 北京
社区版块
存档分类
最新评论

HighChart

    博客分类：
  • Jsp
 
阅读更多

--------单个柱状

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/highcharts.js"></script>

		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
			
			var datastr = "<c:forEach items='${listDetail}' var='l'>${l.score},</c:forEach>";
			datastr = "[" + datastr.substring(0, datastr.length - 1) + "]";

			var datas = eval(datastr);
			
			var datastrs = "<c:forEach items='${listDetail}' var='l'>'${l.subject}',</c:forEach>";
			datastrs = "[" + datastrs.substring(0, datastrs.length - 1) + "]";

			var data = eval(datastrs);
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Inverter Station'
					},
					xAxis: {
						categories: data,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Population (millions)'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'Station 2011: '+ Highcharts.numberFormat(this.y, 1) +
								 ' millions';
						}
					},
				        series: [{
						name: 'Population',
						data: datas,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				
			});
				
		</script>
		
	</head>
	<body>

		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
						
	</body>
</html>

 ---------多个柱状

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/highcharts.js"></script>

		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
			var str = "<c:forEach items='${listDetail}' var='list' >{name:'${list.subject}',"+
			"data:[<c:forEach items='${listDetail}' var='listScore'>${list.score },</c:forEach>]},</c:forEach>";
			str="["+str.substring(0, str.length-1)+"]";
			var data = eval(str);
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'column'
					},
					title: {
						text: 'Monthly Average Rainfall'
					},
					subtitle: {
						text: 'Source: WorldClimate.com'
					},
					xAxis: {
						categories: [
							'Jan', 
							'Feb', 
							'Mar', 
							'Apr', 
							'May', 
							'Jun', 
							'Jul', 
							'Aug', 
							'Sep', 
							'Oct', 
							'Nov', 
							'Dec'
						]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Rainfall (mm)'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					tooltip: {
						formatter: function() {
							return ''+
								this.x +': '+ this.y +' mm';
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
				        series:data
				});
				
				
			});
				
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
		
				
	</body>
</html>

 

分享到：
| Jsp页面禁止缓存
评论
2 楼 ITCheng 2012-02-14  
dingding5060 写道
这个插件商用要付费吗？


不需要调用什么google api吧

免费开源的
1 楼 dingding5060 2012-02-11  
这个插件商用要付费吗？


不需要调用什么google api吧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    matlab开发-HighChart

    在本项目"matlab开发-HighChart"中，我们将重点探讨如何利用MATLAB与HighChart结合，创建动态和交互式的图表。HighChart是一个强大的JavaScript库，用于构建高质量的网页图表，其在数据可视化方面表现卓越，尤其适用...

    引用:highChart控件不错，挺漂亮

    HighChart是一款广泛应用于Web开发中的数据可视化库，它以其丰富的图表类型、良好的交互性和美观的样式赢得了开发者们的喜爱。在本文中，我们将深入探讨HighChart控件的核心特性、使用方法以及如何结合源码进行定制...

    HighChart API

    HighChart API 是一款强大的JavaScript图表库，用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能，使得开发者可以定制各种类型的图表，如柱状图、折线图、饼图、散点图等。下面将详细...

    highchart 3 离线 API 完整版

    "Highchart 3 离线 API 完整版"是Highcharts的第三个主要版本的离线文档和资源包，它包含了所有关于Highcharts 3的API接口、方法、配置选项以及示例代码，方便开发者在无网络环境下查阅和学习。 在Highcharts 3中，...

    HighChart曲线图

    HighChart是一款强大的JavaScript图表库，用于在Web页面上创建各种互动式图表，包括曲线图。在Web开发中，数据可视化是至关重要的，HighChart凭借其丰富的功能和易用性，深受开发者喜爱。以下是对"HighChart曲线图...

    highchart(api)

    这个压缩包文件的标题“highchart(api)”显然与Highcharts的API使用有关，可能包含了一些关于如何利用Highcharts API来绘制图表的示例或教程。 Highcharts的核心功能包括折线图、柱状图、饼图、散点图等多种图表...

    Highchart Demo

    在"Highchart Demo"这个实例中，我们将深入探讨如何利用Highcharts来制作各种类型的图表，以及相关的JavaScript配置和数据接收格式。 首先，Highcharts支持多种图表类型，如折线图、柱状图、饼图、散点图、面积图等...

    highChart后台动态获取数据

    在"highChart后台动态获取数据"这个主题中，我们主要探讨如何利用HighCharts结合后端数据来创建动态图表。 1. **HighCharts基本结构与配置** HighCharts的基本结构包括一个HTML容器元素和JavaScript代码，用于初始...

    bootstrap+EasyUI+highchart中文参考手册

    bootstrap+EasyUI+highchart中文参考手册，本人是后端开发，对前端不是很熟悉，所以在做项目的时候采用了这三个技术，因为是框架所以用起来开发前端很方便，果断选择，后端程序员也能开发出漂亮的前端页面了

    highchart.rar

    在这个名为"highchart.rar"的压缩包中，我们很显然会找到与Highcharts相关的代码示例，尤其是关于如何实现Y轴双数据的设置。 在Web开发中，数据可视化是一个至关重要的环节，它能够帮助用户更好地理解复杂的数据...

    highchart c# demo

    这个"highchart c# demo"示例将指导我们如何在C#后端生成数据，并通过JavaScript在前端展示。 首先，我们需要理解Highcharts的基本结构。Highcharts的核心是HTML5 `&lt;div&gt;`标签，我们在这个标签内插入JavaScript代码...

    highchart

    Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果，如柱状图、折线图、饼图等。它具有丰富的定制选项，能够满足开发者在数据展示方面的各种需求。以下是对Highcharts的一些关键知识...

    HighChart 3.0.2 Demo+API

    HighChart是一款基于JavaScript的开源图表库，用于在Web应用程序中创建高质量、互动式的图表。它在数据可视化领域具有广泛的应用，尤其在Web开发中深受喜爱。3.0.2是HighChart的一个版本，该版本提供了丰富的图表...

    highchart中文帮助文档

    ### Highcharts中文帮助文档知识点详解 #### Chart图表区选项 Highcharts是一款强大的JavaScript图表库，其图表区选项允许用户精细调整图表的外观和行为。以下是一些关键的配置项： - **backgroundColor**: 设置...

    highchart的例子

    highchart的一个例子

    highchart源码

    highchart源码

    highchart源码及实例

    Highcharts是一款功能强大的JavaScript图表库，它用于在Web页面上创建高质量、交互式的图表。这款开源工具使用SVG（Scalable Vector Graphics）技术，同时也支持IE8及以下版本的VML渲染，确保在各种浏览器上都能良好...

    多个highchart带翻页Demo

    在这个"多个highchart带翻页Demo"中，我们将探讨如何利用Highcharts来构建一个包含多张图表并具有翻页功能的示例。 首先，我们需要了解Highcharts的基本用法。Highcharts的核心是`Highcharts.Chart`对象，通过这个...

Magicbox
Global site tag (gtag.js) - Google Analytics