<%@ 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. 使用JavaFX开发桌面程序（一）

    使用JavaFX开发桌面程序 注:我也是JAVA FX的初学者之一,自己在学习的时候踩了许多的坑,中文英文的资料查了不少,但是觉得FX技术和其他热门技术相比,教程还是太少了.这里就尽量做一点微小的贡献 ...

  2. Mac之常见问题

    1. 在命令行下无法使用ll命令 需要设置命令的别名. 文件位置:-/.bash_profile source ~/.profile export PATH="/usr/local/opt/ ...

  3. javascript是否像php一样有isset和empty？

    javascript是否像php一样有isset和empty? is set()在php中用于检测是否设置了变量木浴桶,函数返回布尔值true/false.在javascript中,您可以用替换它!( ...

  4. SQL：MYSQL入门

    MYSQL(关系型数据库管理系统) 参考手册:http://www.w3school.com.cn/sql/index.asp 给大家讲一下数据库:常见的有 ACCESS.MSSSQL.MYSQL.O ...

  5. 创建LEANGOO项目

    转自:https://www.leangoo.com/leangoo_guide/leangoo_guide_create_project.html#toggle-id-3 一个项目包括多个看板和多名 ...

  6. beego注解路由的格式

    原文: https://blog.csdn.net/weixin_33743880/article/details/88016192 beego注解路由的注释,我们可以把我们的注释分为以下类别: @T ...

  7. 常见排序&查询算法Java代码实现

    1. 排序算法代码实现 /** * ascending sort * 外层循环边界条件:总共需要冒泡的轮数--每一轮都将最大或最小的数冒泡到最后 * 内层循环边界条件:冒泡数字移动的边界--最终数字需 ...

  8. ListView 一维排布 动态滑动添加新item代码

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  9. Java语言基础(15)

    1 综合案例 Demo1 设计一个父类Shape(图形类),抽象类常量:public static final double PI = 3.14;抽象方法:void show():输出每一个属性值vo ...

  10. 【未知来源】Randomized Binary Search Tree

    题意 求 \(n\) 个点的 Treap 深度为 \(h=0,1,2,\cdots,n\) 的概率. Treap 是一个随机二叉树,每个节点有权值和优先级,权值和优先级都是 \([0,1]\) 中的随 ...