HighCharts HelloWorld

最新推荐文章于 2015-06-10 14:03:24 发布

passport_daizi

最新推荐文章于 2015-06-10 14:03:24 发布

阅读量745

点赞数

分类专栏： 01 Html 10 JavaEE

本文链接：https://blog.csdn.net/kalision/article/details/40892827

版权

10 JavaEE 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

01 Html

41 篇文章 0 订阅

订阅专栏

1：下载HighCharts 地址：http://www.hcharts.cn/index.php

2：解压Highcharts-4.0.3文件夹

3：在js目录下找到highcharts.js 和 js\modules下找到exporting.js 另外下载jquery.js 把这三个js文件引入到项目中

4：jsp测试页面：

<%@ 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="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/highcharts.js"></script>
	<script type="text/javascript" src="js/exporting.js"></script>
	
  </head>
  
  <body>
  <script type="text/javascript">
	$(function() {
		$('#container').highcharts({ //图表展示容器，与div的id保持一致
			chart : {
				type : 'line',	 //指定图表的类型，默认是折线图（line）
				shadow:true,	 //外框阴影
				inverted: false	 //反向旋转展示
			},
			title : {
				text : '我是图表标题' //指定图表标题
			},
			subtitle: {
                text: '副标题',
                x: -20
            },
			xAxis : {
				categories : [ '语文', '数学', '英语' ] //指定x轴分组
			},
			yAxis : {
				title : {
					text : '分数' //指定y轴的标题
				}
			},
			tooltip: {
				shared: true,        //显示所有数据列的值
                valueSuffix: '分',	 //数值后缀
                crosshairs: true	 //瞄准线
            },
			credits :{ 
				enabled:false  //去掉右下角版权信息 默认显示
			},
			exporting: { 
				enabled:true   //右上角的打印及其导出按钮：默认显示 需要导入exporting.js
			},
			legend: {
		        enabled: true    //图例
		    },
		    plotOptions: {
		        columnrange: {
		        	dataLabels: {
		        		enabled: true,
		        		formatter: function () {
		        			return this.y + '°C';
		        		}
		        	}
		        }
	   		},
			series : [ //指定数据列
			{ 
				name : '张明明', //数据列名
				data : [ 98, 85, 65 ] //数据
			}, 
			{
				name : '李华',
				data : [ 72, 99, 93 ]
			}, 
			{
				name : '胡国',
				data : [ 35, 24, 100 ]
			} 
			]
		});
	});
</script>
    <div id="container" style="width: 100%; height: 400px;"></div>  
  </body>
</html>