HighCharts入门示例

  这两天有空看了看HighCharts的用法。使用方便、功能强大、界面美观。粘一个小例子,大部分代码来自官网。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>highcharts使用示例</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/modules/exporting.js"></script>
<script type="text/javascript">
	function chart1(){
	    $('#container').highcharts({
	        chart: {
	            type: 'bar'
	        },
	        title: {
	            text: 'Fruit Consumption'
	        },
	        xAxis: {
	            categories: ['Apples', 'Bananas', 'Oranges']
	        },
	        yAxis: {
	            title: {
	                text: 'Fruit eaten'
	            }
	        },
	        series: [{
	            name: 'Jane',
	            data: [1, 0, 4]
	        }, {
	            name: 'John',
	            data: [5, 7, 3]
	        }]
	    });
	}
	
	function chart2(){
		var chart = new Highcharts.Chart({
	        chart: {
	        	renderTo:'container',//目标容器
	            type: 'bar'
	        },
	        title: {
	            text: 'Fruit Consumption'
	        },
	        xAxis: {
	            categories: ['Apples', 'Bananas', 'Oranges']
	        },
	        yAxis: {
	            title: {
	                text: 'Fruit eaten'
	            }
	        },
	        series: [{
	            name: 'Jane',
	            data: [1, 0, 4]
	        }, {
	            name: 'John',
	            data: [5, 7, 3]
	        }]
	    });
	}
	
	
	function chart3(){
		var option = new Object();
		option.chart = new Object();
		option.chart.type="bar";
		option.chart.renderTo="container";
		
		option.title={title:"水果的摄入"};
		
		option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};
		option.yAxis={title:{text:"吃水果的量"},tickInterval:1};
		
		option.series = new Array();
		option.series[0] = new Object();
		option.series[0].name="张三";
		option.series[0].data=[1,3,5];
		
		option.series[1] = new Object();
		option.series[1].name="李四";
		option.series[1].data=[6,1,5.5];
		
		option.series[2] = new Object();
		option.series[2].name="刘能";
		option.series[2].data=[3,1,0.3];
		
		var chart = new Highcharts.Chart(option);
	}
	$(function () { 
		//chart1();
		//chart2();
		chart3();
	});
</script>
</head>
<body>
<h3 style="text-align:center;">highcharts使用示例</h3>
<div id="container" style="width:100%;height:500px;border:1px solid red;"></div>
</body>
</html>

你可能感兴趣的:(highchart)