<%@ 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. electron-vue在npm run build时报错 ⨯ cannot execute cause=fork/exec C:\Users\801\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.5.0\rcedit-ia32.exe: Access is denied.

    问题描述 在electron-vue执行npm run build时报错,错误如下: ⨯ cannot execute cause=fork/exec C:\Users\801\AppData\Loc ...

  2. 一个简单的创建xml方式

    , matnr LIKE mara-matnr , maktx LIKE makt-maktx , END OF itab_matnr . , class LIKE m_wwgha-class,&qu ...

  3. MySQL导出数据到文件中

    一.导出一张表数据 把test_time表中的数据导出成txt 文件 mysql> show global variables like '%secure%'; +--------------- ...

  4. c#类生成表

    第一步: 创建MyContext类 public class MyContext:DbContext { public MyContext():base() { } public DbSet<U ...

  5. Odoo的 数据添加修改删除代码和对应的方式

    完整的可用命令如下: (0, _ , {‘field’: value})新建一条记录并将其与之关联 (1, id, {‘field’: value})更新已关联记录的值 (2, id, _)移除关联并 ...

  6. 在 Sublime Text 3 中使用 SublimeClang 插件

    SublimeClang 是 Sublime Text 中唯一的 C/C++ 自动补全插件,功能强大,自带语法检查功能,可惜目前作者停止更新了,而且只支持 Sublime Text 2.今晚在 ST ...

  7. 【2017-04-19】C#中String.Format格式使用

    例子: int a =9; string s= a.ToString("000"); Console.Write(s); 打印出来就是009 C#格式化数值结果表 字符 说明 示例 ...

  8. Keepalived + Haproxy + PXC 理论篇

    最终模型: 将Kp1 + Kp2 分别和Ha1和Ha2部署在一起,同时绑定VIP ip,对外提供访问,同时监控本机的Haproxy的可用性 通过Ha1 + Ha2 为PXC提供负载均衡,分发请求到后端 ...

  9. windows 快捷键收集

    1. 放大镜 windows徽标 + "+“ 2. 直接显示桌面 windows徽标 + D 3. 收起所有窗口 windows徽标 + M 4. 浏览器中恢复之前关闭的页面 Ctrl + ...

  10. 解决PHP中json_encode()不支持中文的替代函数

    json_encode()是PHP中将数组转换成JSON格式的函数,因为各种原因只要是中文就会乱码= = 找到了这么一个函数替代了原有的json_encode(),能很好地输出中文~ function ...