首页 > 代码库 > HighCharts操作案例-柱状图

HighCharts操作案例-柱状图

2024-07-18 18:15:22   237人阅读

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script src="<%=basePath%>bootmetro/js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '刘鹏的柱状图'
            },
            subtitle: {
                text: 'Source: http://blog.csdn.net/liupeng_family'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                },
                labels: {//格式化纵坐标的显示风格
                    formatter: function() {
                        return this.value ;
                    }
                },
                opposite: false//反转
            },
	    legend: {//是否显示底注
           	 enabled: true
       		 },
            tooltip: {
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
		//colorByPoint: true, //为每个柱子显示不同颜色
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    
            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    
            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    
            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    
            }]
        });
    });
    

		</script>
	</head>
	<body>
<script src="highcharts/highcharts.js"></script>
<script src="<%=basePath%>highcharts/exporting.js"></script>

<div id="container" style="min-width:800px; height: 400px; margin: 0 auto"></div>

	</body>
</html>



联系
我们