<%@ 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. ZROIDay3-比赛解题报告

    ZROIDay3-比赛解题报告 瞎扯 从今天开始考试有点不在状态,可能是因为不太适应题目的原因,T1已经接近了思想但是没有想到状态转移,T2思考方向错误,T3不会打LCT,还是太菜了 A 考场上想到要 ...

  2. Android中如何判断内存卡是否存在

    if (Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)) { /* 得到SD卡得路 ...

  3. nfs服务器的搭建和使用

    目录 更新记录 1.nfs介绍 1.1 nfs概念 1.2 nfs工作原理 1.3 nfs通讯过程 2.搭建和测试 NFS 服务器 2.1 搭建NFS服务器 2.2 测试NFS服务器 3.在线调试:N ...

  4. vue axios异步请求django

    1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...

  5. cookie、sessionStorage和localStorage区别

    // 数据存储 cookie:生命周期一般是手动设置失效的时间,大小为4k,易用性不高,需要自己封装(封装请看上一篇博客) sessionStorage:生命周期是浏览器关闭接失效,大小为5m或者更大 ...

  6. 小程序API接口调用

    1.在config.js中写入api接口及appkey   2.在HTTP.js中引入config.js,然后新建HTTP.js,在里进行wx.request的封装. 定义一个HTTP的类,来类里定义 ...

  7. 8.Hibernate性能优化

    性能优化 1.注意session.clear() 的运用,尤其在不断分页的时候 a) 在一个大集合中进行遍历,遍历msg,取出其中额含有敏感字样的对象 b) 另外一种形式的内存泄漏( //面试题:Ja ...

  8. STM32WB SRAM2

    SRAM2存储: 1.挂接总线及地址大小 2.地址镜像 3.RDP(read protection)等级 4.不同等级下的访问状态 5.声明位于SRAM2区中的数据 1)在icf文件中定义region ...

  9. [Suricata]无法禁用某些规则的解决办法

    背景: 生产环境中部署了suricata,日常规则更新使用suricata-update,如果想禁用某些规则,可以在配置文件/etc/suricata/disable.conf中添加,比如: #禁用规 ...

  10. x86和x64下指针的大小

    根据测试 int main() { ; )); )); int n1 = sizeof(a); int n2 = sizeof(p); // int n3 = sizeof(*p); error in ...