HighCharts入门示例

布满荆棘的人生 2022-04-13 10:35 321阅读 0赞

这两天有空看了看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>