Highcharts使用教程

最新推荐文章于 2024-08-21 06:09:54 发布

lvzi98

最新推荐文章于 2024-08-21 06:09:54 发布

阅读量6k

点赞数

分类专栏： java开发文章标签：报表

java开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近要使用报表使用了Highcharts

1去官网下载http://www.highcharts.com/，和jquery  http://www.jquery.com/download


2.在页面引人js文件


<script type="text/javascript"src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>




注意引人的顺序，先jquery的，否则页面不显示。


<script type="text/javascript" src="js/grid.js"></script>


 这个是主题样式文件，可选的

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
	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 'MyJsp.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">
		<script type="text/javascript" src="<%=path%>/js/jquery-1.7.min.js"></script>
		<script src="<%=path%>/js/highcharts.js"></script>
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">

			var chart1; // 全局变量
			$(document).ready(function() {
			chart1 = new Highcharts.Chart({
			chart : {
			renderTo : 'container',//注意这里的名称和body里面的div的id要对应
			type : 'bar'
			},
			title : {
			text : 'Fruit Consumption'
			},
			xAxis : {
			categories : [ 'Apples', 'Bananas', 'Oranges' ]
			},
			yAxis : {
			title : {
			text : 'Fruit eaten'
			}
			},
			series : [ {
			name : 'Jane',
			data : [ 1, 2, 4 ]
			}, {
			name : 'John',
			data : [ 5, 7, 3 ]
			} ]
			});
			});
</script>

第二个例子：
<script type="text/javascript">
var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_line', //图表放置的容器，DIV 
            defaultSeriesType: 'line', //图表类型line(折线图), 
            zoomType: 'x'   //x轴方向可以缩放 
        }, 
        credits: { 
            enabled: false   //右下角不显示LOGO 
        }, 
        title: { 
            text: '一楼湿度历史记录' //图表标题 
        }, 
        subtitle: { 
            text: '2012年'  //副标题 
        }, 
        xAxis: {  //x轴 
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', 
 '11月', '12月'], //x轴标签名称 
            gridLineWidth: 1, //设置网格宽度为1 
            lineWidth: 2,  //基线宽度 
            labels:{y:26}  //x轴标签位置：距X轴下方26像素 
        }, 
        yAxis: {  //y轴 
            title: {text: '平均气温(°C)'}, //标题 
            lineWidth: 2 //基线宽度 
        }, 
        plotOptions:{ //设置数据点 
            line:{ 
                dataLabels:{ 
                    enabled:true  //在数据点上显示对应的数据值 
                }, 
                enableMouseTracking: false //取消鼠标滑向触发提示框 
            } 
        }, 
        legend: {  //图例 
            layout: 'horizontal',  //图例显示的样式：水平（horizontal）/垂直（vertical） 
            backgroundColor: '#ffc', //图例背景色 
            align: 'left',  //图例水平对齐方式 
            verticalAlign: 'top',  //图例垂直对齐方式 
            x: 100,  //相对X位移 
            y: 70,   //相对Y位移 
            floating: true, //设置可浮动 
            shadow: true  //设置阴影 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        series: [
        {  //数据列 
            name: '一楼1号', 
            data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7] 
        }, 
        { 
            name: '一楼2号', 
            data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6] 
        },{ 
            name: '一楼3号', 
            data: [10.3, 11.4, 13.7, 22.9, 24.6, 37.2, 35.8, 32.1, 29.2, 21.7, 11.3, 5.6] 
        },{ 
            name: '一楼4号', 
            data: [12.3, 15.4, 17.7, 22.9, 23.6, 27.2, 35.8, 32.1, 24.2, 21.7, 10.3, 9.6] 
        },{ 
            name: '一楼5号', 
            data: [14.3, 16.4, 13.7, 12.9, 26.6, 33.2, 36.8, 38.1, 22.2, 22.7, 21.3, 12.6] 
        }] 
    }); 
}); 
</script>
第三个例子：
<script type = "text/javascript">
var chart; 
Highcharts.setOptions({ 
    global: { 
        useUTC: false 
    } 
}); 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_spline', //图表放置的容器，DIV 
            defaultSeriesType: 'spline', //图表类型为曲线图 
            events: { 
                load: function() {  
                    var series = this.series[0]; 
                    //每隔5秒钟，图表更新一次，y数据值在0-100之间的随机数 
                    setInterval(function() { 
                        var x = (new Date()).getTime(), // 当前时间 
                        y = Math.random()*20;  
                        series.addPoint([x, y], true, true); 
                    }, 
                    3000); 
                } 
            } 
        }, 
        title: { 
            text: '湿度走势图'  //图表标题 
        }, 
        xAxis: { //设置X轴 
            type: 'datetime',  //X轴为日期时间类型 
            tickPixelInterval: 150  //X轴标签间隔 
        }, 
        yAxis: { //设置Y轴 
            title: '', 
            max: 50, //Y轴最大值 
            min: 0  //Y轴最小值 
        }, 
        tooltip: {//当鼠标悬置数据点时的提示框 
            formatter: function() { //格式化提示信息 
                return 'CPU使用率'+ 
                Highcharts.dateFormat('%H:%M:%S', this.x) +''+  
                Highcharts.numberFormat(this.y, 2)+'%'; 
            } 
        }, 
        legend: { 
            enabled: false  //设置图例不可见 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        credits: { 
            text: 'lain.com.cn', //设置LOGO区文字 
            url: 'http://www.lain.com.cn' //设置LOGO链接地址 
        }, 
        series: [{ 
            data: (function() { //设置默认数据， 
                var data = [], 
                time = (new Date()).getTime(), 
                i; 
 
                for (i = -19; i <= 0; i++) { 
                    data.push({ 
                        x: time + i * 5000,  
                        y: Math.random()*100 
                    }); 
                } 
                return data; 
            })() 
        }] 
    }); 
}); 
</script>





	</head>
	<body>
		<div id="container" style="width: 100%; height: 400px"></div>
		
		<div id="chart_line" style="width: 100%; height: 400px"></div>

		<div id="chart_spline" style="width: 100%; height: 400px"></div>
		
	<body>
		This is my JSP page.
		<br>
	</body>
</html>

http://blog.sina.com.cn/s/blog_a4908c6b0101lz03.html