jsp 快速開發報表 chart.js 餅圖示例系列教材（一）

阿新 • • 發佈：2019-01-26

畫餅圖，需要有兩個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>

訪問效果是這樣的：
這裡寫圖片描述

jsp 快速開發報表 chart.js 餅圖示例系列教材（一）

畫餅圖，需要有兩個js,一個是chart.js一個是jquery.min.js，我這兩個都放在了webContent下了引入方法： <script type="text/javasc

JSP網站開發之HTML入門知識及常用標記符（一）

最近發生的事情很多，其中一件很重要的事情就是：學生生涯的結束，教學生涯的開始。我準備下個月寫一篇總結研究生生涯的文章，包括自己放棄網際網路選擇回家教書、找工作經歷、專案和畢業設計的各種感想。很榮幸XB七月初就給了我第一次大學教學的經歷，很享受很珍惜也很感觸。

JS函數和對象（一）

inf ack bsp 用法 .cn 求和封裝 obj [0 在本文章中，將對JS中的函數和對象進行一些講解，不對之處還請之處一.JS中的函數 1.1無參函數其形式如下代碼所示 function box(){ alert("我是一個函數，只有被調用才會執行

linux驅動開發之蜂鳴器驅動源碼分析（一）

linux 蜂鳴器驅動蜂鳴器的驅動源碼在/driver/char/buzzer/x210-buzzer.c文件中，源碼如下#include <linux/module.h> #include <linux/kernel.h> #include <linux

前端之 —— node.js摸爬打滾之路（一）

turn lan name resp function oba ack val 括號安裝： window下的安裝，node.js直接上官網下載：https://nodejs.org/en/ 選擇LTS，也就是版本號比較低的穩定版，下載下來後運行下載的文件進行安裝；通

vue.js實戰學習——內置指令（一）

name 初始節點刪除 html元素 data post 編譯 16px 註：此內容摘抄自：梁灝的《Vue.js實戰》註：記得要引入vue.js才能運行哦，文章中貼出的代碼直接復制是不行的，html css js 都放在了一起，而且也沒有引用vue.js。 1.v

Python圖像處理庫PIL中圖像格式轉換（一）

http 分享圖片 r+ name 結果針對浮點 code 技術在數字圖像處理中，針對不同的圖像格式有其特定的處理算法。所以，在做圖像處理之前，我們需要考慮清楚自己要基於哪種格式的圖像進行算法設計及其實現。本文基於這個需求，使用python中的圖像處理庫PIL來實現不

SQL語句常見視圖操作部分試題（一）

一個 views upd ora 數據文本 cot pri int 創建一個名稱為EMPLOYEES_VU的視圖，它基於EMPLOYEES表中的雇員號、雇員名和部門號。將雇員名的列標題改為EMPLOYEE。CREATE VIEW EMPLOYEES_VU AS SELEC

HLS圖像處理總結（一）

特征提取分析參數 gets eight xilinx 意思導入 vhdl HLS工具以個人的理解，xilinx將HLS（高層次綜合）定位於更方便的將復雜算法轉化為硬件語言，通過添加某些配置條件HLS工具可以把可並行化的C/C++的代碼轉化為vhdl或verilog,

教你如何用node.js開發微信公眾號（一）

內容簡介本文章簡單介紹瞭如何用node.js開發微信公眾號。主要內容包括signature的驗證，access_token的生成，微信事件的接收，還有各種api的呼叫。準備工作開發前需要安裝好node.js,因為我是基於express框架開發的，所以裝了express(框架按自己的需求選擇),需要

Opencv開發筆記五：畫素的讀寫（一）

一、講講什麼是畫素畫素是指由影象的小方格即所謂的畫素(pixel)組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，這些小方塊內放的數和所放的位置據決定了影象在某個位置所顯示的顏色，比如某一塊區域放的都是數字0（255），則該片區域會顯示出黑色（白色），可以將畫素視

android開發系列教程（一）啟動頁

1.啟動頁延時跳轉+沉浸狀態列+啟動頁圖片全屏 public class SplashActivity extends AppCompatActivity { @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)

Vue.js 2.0 教程精華梳理（一）基礎

Vue.js 第一部分 Vue.js 介紹 Vue.js（讀音 /vjuː/, 類似於 view）是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其

js執行機制及非同步程式設計（一）

相信大家在面試的過程中經常遇到檢視執行順序的問題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實這些問題最終還是考察大家對js的執行機制是否掌握牢固，對promise，async的原理是否掌握，萬變不離其宗，這次就來徹底搞懂它。 1 js引擎

【Android開發—智慧家居系列】（一）：智慧家居原理

　　①.通過手機端APP中的配置程式，配置模組要連線的路由器的名稱(SSID)和金鑰; 　　②. 將WIFI模組連線路由器，路由器通過外網連線到伺服器，如小米的伺服器。完成連線工作。　　③.手機等控制終端連線遠端伺服器，下達命令; 　　④.遠端伺服器將使用者指令下發給住宅中的WiFi插座　　⑤.W

【Android UI設計與開發】第06期：底部選單欄（一）使用TabActivity實現底部選單欄

轉載請註明出處：http://blog.csdn.net/yangyu20121224/article/details/8989063 從這一篇文章開始，我們將進入到一個應用程式主介面UI的開發和設計中了，底部選單欄在Android的應用開發當

Sail.js官方文件閱讀筆記（一）——總體結構

sails.js是一個後端開發框架，它是基於Node的著名框架express之上的。當前工作接手了一個系統，該系統的console部分是以sails.js完成其前後端功能的，故學習了sails.js的部分官方文件，特以此係列筆記以記之。因初學乍練，如有錯誤，歡迎指正。在官網中，使用Sail

UML類圖中的關係（一）

前言： UML中類圖之間的關係有許多種，我們在使用畫圖工具畫圖時常常會因為不瞭解類圖之間的關係而導致類圖畫的不夠準確，不能高效簡單地表達開發需求，學的時候就有點模模糊糊，傻傻分不清楚，現在UML

手把手教你用nginx開發自己的伺服器------利用nginx實現負載均衡（一）------負載均衡的整體架構

之前我們講的是用nginx做一個簡單的helloworld功能，幫助大家瞭解一下nginx中的基本框架，今天我們就來學習下如何用nginx實現一個負載均衡伺服器。為什麼要先講nginx的負載均衡模組呢？主要是nginx現在在各個大廠的應用場景主要就是做7層負載均衡和一些C

E-R圖的基本概念（一）

可能是因為物聯網這個詞本身的概念範圍太廣了。作為一名物聯網專業的學生，也是累，什麼都搞搞。出到社會還要和電腦科學專業的人搶飯碗。這不。。。學完嵌入式後，來學資料庫了。鑑於聽別人說學好資料庫，不愁找飯碗，因此本著既學之，則安之的原則，為了達到把書越讀越薄的目的

jsp 快速開發報表 chart.js 餅圖示例 系列教材（一）

相關推薦

jsp 快速開發報表 chart.js 餅圖示例系列教材（一）