<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%
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 'sbxmgk.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="<%=basePath%>js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/highcharts.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/exporting.js"></script>
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

//柱状图********************************************************************************

<script type="text/javascript">
    $(function () {
    $('#container_2').highcharts({
        chart: {
        //type指定柱状图显示
            type: 'column',    
        },
       
        title: {
        //柱状图标题
            text: ''
        },
        subtitle: {
            text: '数据截止 2017-06'
        },
         credits: {  
                    enabled: false   //右下角不显示LOGO  
                },
        exporting: {//Highcharts 图表导出功能模块。  
                    enabled: false  
                },
        xAxis: {
            type: 'category',
            labels: {
            //x轴倾斜度
                rotation: -45,
                style: {
                //字体大小
                    fontSize: '13px',
                    //字体风格
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
            //y轴标题
                text: '单位(万元)'
            }
        },
        legend: {
        //y轴
            enabled: false
        },
        tooltip: {
        //保留几位小数鼠标移上去
            pointFormat: '费用: <b>{point.y:.2f} 万元</b>'
        },
         //让柱状图上数字溢出显示     
plotOptions: {
    column: {
        dataLabels: {
        overflow: "none",
        crop: false,
        }
    }

},
        series: [{
       //y轴显示
            name: '',
            data: [
                        ['资料费',${zlf}],  
                        ['讲课费',${jkf}],  
                        ['场地费',${cdf}],  
                        ['学员补助',${xybz}],
                        ['其他支出',${qtzc}]
                         
            ],
            dataLabels: {
            //显示数字y轴固定数据
                enabled: true,
                //字体倾斜角度
                rotation: 0,
                color: '#000000',
                
                align: 'center',
                //y轴显示保留两位小数
                format: '{point.y:.2f}', // one decimal
                //字体在柱状图上下移动
                y: 0, // 10 pixels down from the top
                style: {
               //y轴字体大小
                    fontSize: '13px',
                    //y轴字体风格
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});
    
</script>

//饼状图*******************************************************************************************
   <script type="text/javascript">  
           $(function() {  
                $('#container_1').highcharts({  
                chart: {  
                //type指定饼状图显示
                    type: 'pie',  
                    //背景颜色
                    backgroundColor:"#FFFFFF",  
                    x:-200,  
                    //圖形大小
                    height: 300,  
                    //居左距離
                    marginLeft:-200
                     
                },  
                credits: {  
                    enabled: false   //右下角不显示LOGO  
                },  
                title: {  
                //餅狀圖上面不加字标题
                    text: '',  
                },  
                subtitle: {  
                //餅狀圖上面不加字
                    text: '',  
                },  
                exporting: {
                //Highcharts 图表导出功能模块。  
                    enabled: false  
                },  
                //图形颜色
                colors: ['#E2214E', '#F7B52B'],
                //饼状图旁边显示的比例的事件  
                legend: {  
                //垂直
                    layout: 'true',  
                    floating: true,  
                    backgroundColor: '#FFFFFF',  
                    align: 'right',  
                    verticalAlign: 'top',  
                    //调整饼状图旁边的比例靠上还是靠下
                    y: 35,  
                  //调整饼状图旁边的比例靠左还是靠右
                    x: -20,  
                    itemMarginBottom :2,//图例的上下间距  
                    //区域大小
                    maxHeight: 200,  
                    symbolHeight: 14,//图例高度 及大小
                    //小图标与比例的距离
                    symbolWidth:14  
                },  
                
                plotOptions: {  
                    pie: {  
                        allowPointSelect:false,  
                        cursor: 'pointer',  
                        dataLabels: {  
                        //是否显示饼状图上的拉线
                            enabled: false  
                        },  
                        
                        showInLegend: true,  
                        symbolWidth: 24,  
                        point: {  
                            events: {  
                                legendItemClick: function (e) {  
                                    return false; // 直接 return false 即可禁用图例点击事件  
                                }  
                            }  
                        }  
                    }  
                },  
                
                series: [{  
                    data: [  
                        ['专项经费'+'' +'<span style="text-align:center;"><fmt:formatNumber value="${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>'+'%'+'</span>',<fmt:formatNumber value="${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>],  
                        ['自筹经费'+''+'<span style="text-align:center;"><fmt:formatNumber value="${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>'+'%'+'</span>',<fmt:formatNumber value="${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>]
                          
                    ]  
                }]  
            });  
        });  
             
    </script>

　　　<table width="1175px" border="0" cellspacing="0" align="center"  style="TABLE-LAYOUT: fixed" cellpadding="0">
            <tr>
                <td id="container_1" align="left" style="width:50%; align:left; margin: 0 auto;
                </td>
                <td id="container_2" align="left" style="width:50%; align:left; margin: 0 auto;background-color:#FFFFFF">
                </td>
            </tr>
                
        </table>

highcharts柱状图、饼状图的更多相关文章

  1. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

  2. PSP 进度条 柱状图 饼状图

    9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小组 ...

  3. Yii 2.0: yii2-highcharts-widget创建饼状图

    安装 The preferred way to install this extension is through composer. 项目根目录下执行: php composer.phar requ ...

  4. HeightCharts柱状图和饼状图

    HTML: <div id="container1"  style="height:350px; " ></div>    <di ...

  5. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  6. arcgis api for flex之专题图制作（饼状图，柱状图等）

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  7. DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  8. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  9. Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图

    1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...

随机推荐

  1. 【weixi】微信支付---微信公众号JSAPI支付

    一.JSAPI支付 JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付.应用场景有: ◆ 用户在微信公众账号内进入商家公众号,打 ...

  2. node 基本搭建 server.js

    const express = require('express'); const expressStatic = require('express-static'); const bodyparse ...

  3. Linux下Mysql 不能访问新数据文件夹问题

    新挂载的盘,打算将数据文件夹配置到 /data/mysql,却无法启动mysqld. 除了将目录授权给mysql用户和组以外 chown -R mysql:mysql /data/mysql 太需要将 ...

  4. XML基础介绍【二】

    XML基础介绍[二] 1.schema约束dtd语法: <!ELEMENT 元素名称 约束>schema符合xml的语法,xml语句.一个xml中可以有多个schema,多个schema使 ...

  5. 用Python+Aria2写一个自动选择最优下载方式的E站爬虫

    前言 E站爬虫在网上已经有很多了,但多数都只能以图片为单位下载,且偶尔会遇到图片加载失败的情况:熟悉E站的朋友们应该知道,E站许多资源都是有提供BT种子的,而且通常打包的是比默认看图模式更高清的文件: ...

  6. Linux下源码编译安装MySql，centeros7

    1. 安cmake工具 # yum install -y cmake 2. 创建mysql用户  #useradd -s /sbin/nologin mysql  //设置为非登陆用户(安全) 3. ...

  7. 建立一个可以不停地接收客户端新的连接，但不能处理复杂的业务的C/S网络程序

    在Windows平台上主要有两个版本的Socket Api函数:WinSock 1.1和WinSock 2.2 , 2.2版本默认兼容1.1版本,1.1 winsock.h wsock32.lib w ...

  8. kotlin字符串和数字之间的转换和人机交互

    继续基础学习~ 字符串和数字之间的转换 那如何转换呢,其实很简单: 编译木有报错,但是运行: 所以这里了解下. 人机交互 看这标题貌似高端的,其实也就是程序可以接受键盘的输入啦,下面开始: 首先提示用 ...

  9. libusb 3.0

    1)usb3.0 在windows使用winusb时,出现ReadFile的input buffer 太大时,读不到数据问题? 2)linux下,usb 3.0 libusb_claim_interf ...

  10. Python main()函数解析

    __main__ — Top-level script environment '__main__'是顶级代码执行的作用域的名字. 当一个模块从标准input, 一个脚本文件,或一个交互命令read读 ...