jsp 快速开发报表 chart.js 饼图示例系列教材（一）

最新推荐文章于 2023-09-23 21:24:49 发布

知乎关注八戒来了

最新推荐文章于 2023-09-23 21:24:49 发布

阅读量4.9k

点赞数

分类专栏：报表开发文章标签： chart-js

本文链接：https://blog.csdn.net/wangyonglin1123/article/details/50288527

版权

报表开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

画饼图，需要有两个js,一个是chart.js一个是jquery.min.js，我这两个都放在了webContent下了引入方法：

    <script type="text/javascript"  src="${pageContext.request.contextPath}/jquery.min.js"></script>

数据传输方式json格式，后台可以直接传入json

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head> 
        <title>Bar Chart</title>
        <script type="text/javascript"  src="${pageContext.request.contextPath}/Chart.js"></script>
        <script type="text/javascript"  src="${pageContext.request.contextPath}/jquery.min.js"></script>

    <style>
            #canvas-holder {
                width: 100%;
                margin-top: 50px;
                text-align: center;
            }
            #chartjs-tooltip {
                opacity: 1;
                position: absolute;
                background: rgba(0, 0, 0, .7);
                color: white;
                padding: 3px;
                border-radius: 3px;
                -webkit-transition: all .1s ease;
                transition: all .1s ease;
                pointer-events: none;
                -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }
            #chartjs-tooltip.below {
                -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }
            #chartjs-tooltip.below:before {
                border: solid;
                border-color: #111 transparent;
                border-color: rgba(0, 0, 0, .8) transparent;
                border-width: 0 8px 8px 8px;
                bottom: 1em;
                content: "";
                display: block;
                left: 50%;
                position: absolute;
                z-index: 99;
                -webkit-transform: translate(-50%, -100%);
                transform: translate(-50%, -100%);
            }
            #chartjs-tooltip.above {
                -webkit-transform: translate(-50%, -100%);
                transform: translate(-50%, -100%);
            }
            #chartjs-tooltip.above:before {
                border: solid;
                border-color: #111 transparent;
                border-color: rgba(0, 0, 0, .8) transparent;
                border-width: 8px 8px 0 8px;
                bottom: 1em;
                content: "";
                display: block;
                left: 50%;
                top: 100%;
                position: absolute;
                z-index: 99;
                -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }
    </style>
</head>

<body>

    <%
     String dataSource1=
     "{\"value\": \"600\",\"color\": \"#FFFFF\", \"highlight\": \"#FFAA5E\",\"label\": \"Red\" }, {\"value\": \"300\",\"color\": \"#F7464A\", \"highlight\": \"#FF5A5E\",\"label\": \"Red\" }";
     request.setAttribute("dataSource",dataSource1);
     String dataSource=(String)request.getAttribute("dataSource");
    %>
    <div id="canvas-holder">
        <canvas id="chart-area1" width="50" height="50" />
    </div>
    <div id="canvas-holder">
        <canvas id="chart-area2" width="300" height="300" />
    </div>

    <div id="chartjs-tooltip"></div>


    <script>
    Chart.defaults.global.customTooltips = function(tooltip) {

        // Tooltip Element
        var tooltipEl = $('#chartjs-tooltip');

        // Hide if no tooltip
        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        // Set caret Position
        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        // Set Text
        tooltipEl.html(tooltip.text);

        // Find Y Location on page
        var top;
        if (tooltip.yAlign == 'above') {
            top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
        } else {
            top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
        }

        // Display, position, and set styles for font
        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + top + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    };

    var pieData = [<%=dataSource%>];

    window.onload = function() {
        var ctx1 = document.getElementById("chart-area1").getContext("2d");
        window.myPie = new Chart(ctx1).Pie(pieData);

        var ctx2 = document.getElementById("chart-area2").getContext("2d");
        window.myPie = new Chart(ctx2).Pie(pieData);
    };
    </script>
</body>

</html>

访问效果是这样的：
这里写图片描述

知乎关注八戒来了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsp 快速开发报表 chart.js 饼图示例系列教材（一）

画饼图，需要有两个js,一个是chart.js一个是jquery.min.js，我这两个都放在了webContent下了引入方法： <script type="text/javascript" src="${pageContext.request.contextPath}/jquery.min.js"></script>数据传输方式json格式，后台可以直接传入json<%@ page l
复制链接

扫一扫