HighCharts操作案例-柱状图

<%@ 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>

HighCharts操作案例-柱状图

时间: 2024-10-09 18:54:53

HighCharts操作案例-柱状图的相关文章

HighCharts操作案例-3D可拖拽柱状图

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

HighCharts操作案例

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

Android开发操作案例分享!

Android LRecyclerView 操作案例分享-实现下拉刷新.滑动到底部自动加载,一直想抽空写下这个开源项目www.itxdl.cn,但是各种原因没有抽时间,今天还是趁着工作间隙写下了这篇博客,与大家分享. 简介 LRecyclerView是支持addHeaderView. addFooterView.下拉刷新.分页加载数据的RecyclerView. 它对 RecyclerView 控件进行了拓展,给RecyclerView增加HeaderView.FooterView,并且不需要对

AngularJS基于MVC的复杂操作案例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AngularJS基于MVC的复杂操作案例</title> 6 <script type="text/javascript" src="../js/angular.min.js"></script> 7 </

HighCharts之2D柱状图 折线图的组合多轴图

HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合多轴图</title> <script type="text/javascript" src="../scripts/

Highcharts之3D柱状图

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>Highcharts-3D柱状图举例</title> 7 <style type="text/css"> 8 #container

Spring+Jersey+JPA+Hibernate+MySQL实现CRUD操作案例

本文承接我的另一篇博文:Spring+Jersey+Hibernate+MySQL+HTML实现用户信息增删改查案例(附Jersey单元测试),主要更改内容如下: Spring配置文件applicationContext中原先使用的是Hibernate,现在改为Hibernate对JPA的支持: 增加了C3P0连接池: 修改了Dao操作实现,改为Spring接管的JPA实现. 如果读者想详细查看Spring整合Jersey与前端交互可以点击上述连接.本文主要介绍以上三处修改内容,并且使用Jers

RobotFramework自动化系列4-批量操作案例

前言 有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象.Selenium2library提供了Get Webelements 关键字,用于定位一组元素 以百度页面为例,先定位一组对象,然后依次打开每个链接,检测返回结果. 一.定位一组对象 1.打开百度页面,定位右上角六个链接按钮 2.定位元素共同属性class=mnav 二.Get Webelements 1.在ride中找到对应关键字Get Webelements,从关键字介绍中可以看到,返回的是一

Hive学习之五 《Hive进阶—UDF操作案例》 详解

hive—UDF操作 udf的操作过程: 在HIVE会话中add 自定义函数的jar文件,然后创建function,继而使用函数. 下面就以下面课题为例: 课题:统计每个活动的PV和UV 一.Java通过正则表达式,截取标题名称. 以链接,截取标红的字符串. http://cms.yhd.com/sale/vtxqCLCzfto?tc=ad.0.0.17280-32881642.1&tp=1.1.36.9.1.LEffwdz-10-35RcM&ti=ZX8H 为例. 核心代码如下, imp