JsChart組件使用

来源:https://www.cnblogs.com/Java3y/archive/2018/03/04/8504028.html
-Advertisement-
Play Games

JsChart是什麼？ JSChart能夠在網頁上生成圖標，常用於統計信息，十分好用的一個JS組件。 使用JsChart 一。導入jscharts.js 二。編寫jscharts.jsp測試頁面 1. 下載JScharts庫 從官網下載JScharts庫，我們使用的是壓縮包裡面的jscharts.j ...


JsChart是什麼？

JSChart能夠在網頁上生成圖標，常用於統計信息，十分好用的一個JS組件。

使用JsChart

一。導入jscharts.js
二。編寫jscharts.jsp測試頁面

  1. 下載JScharts庫

從官網下載JScharts庫，我們使用的是壓縮包裡面的jscharts.js文件。它大約150KB。

  1. 使用JScharts庫

在網頁文件（如.html或.jsp）包含JScharts庫。


<script type="text/javascript" src="js/jscharts.js"></script>
  1. 定義容器

要在網頁文件上顯示JScharts生成的圖像，需要把此圖像放入網頁容器。此網頁容器我們通常用

標簽來定義，而且必須強制性地為此DIV元素指定唯一的ID值。比如：


<div id="chartcontainer">這裡將用來顯示圖形報表</div>

註意：此DIV容器內的內容都會被JScharts圖像所替代。

  1. 顯示JScharts圖像
    下麵，我們需要寫少量代碼來顯示一個線性圖。首先要準備好圖像所需的數據，我們可以用JavaScript數組來提供數據，數組中的每個元素都是由2個元素所組成

<script type="text/javascript">
        var myData = new Array([ "商品1", 20 ], [  "商品2", 10 ], [  "商品3", 30 ], [  "商品4", 10 ],
                [  "商品5", 5 ]);
        var myChart = new JSChart('chartcontainer', 'line');
        myChart.setDataArray(myData);
        myChart.draw();
        </script>

5.使用詳細說明

<body>
    <div id="chartcontainer">這裡將用來顯示圖形報表</div>
    <script type="text/javascript">
    //支持js二維數組、json格式、xml格式數據源
        var myData = new Array([ "商品1", 20 ], [  "商品2", 10 ], [  "商品3", 30 ], [  "商品4", 10 ],
                [  "商品5", 5 ]);
                //第二個參數值有：line,bar,pie分別表示用線形圖、柱狀圖、餅圖來展示報表
        var myChart = new JSChart('chartcontainer', 'line');
        //數據源處理方式一：setDataArray(myData)使用js數組
        //myChart.setDataArray(myData);
        //數據源處理方式二：setDataJSON使用json格式數據
        //myChart.setDataJSON("data.json");
        //數據源處理方式三：setDataXML使用xml格式數據
        myChart.setDataXML("data.xml");
        
        myChart.setTitle('測試報表');
        
        myChart.draw();
        </script>
        
<!-- var myChart = new JSChart('chart_container', $("#type").val(),'');
                    
setAxisColor(string hexcolor)設置軸線顏色，對餅圖無效。參數為16進位顏色值。

resize(integer x, integer y)重置圖表大小，預設x/y為400px/300px，新值應是預設值的整數倍.

setAxisNameColor(string hexcolor)設置軸線名的顏色，對餅圖無效。

setAxisNameFontSize(integer fontsize)設置軸線名字體大小，對餅圖無效。預設是11。

setAxisNameX(string axisname)設置x軸的名稱，對餅圖無效。

setAxisNameY(string axisname)設置y軸的名稱，對餅圖無效。

setAxisPaddingBottom(integer padding)設置x軸和容器底部的距離，預設30。

setAxisPaddingLeft(integer padding)設置y軸和容器左邊距的距離，預設40。

setAxisPaddingRight(integer padding)設置圖表右邊和容器的距離，預設30。

setAxisPaddingTop(integer padding)設置圖表上邊和容器的距離，預設30。

setAxisValuesColor(string hexcolor)設置x/y軸值刻度值的顏色，對餅圖無效。

setAxisValuesDecimals(integer decimals)設置曲線圖的x/y軸值，或柱狀圖的y軸值，對餅圖無效，預設是auto。

setAxisValuesFontSize(integer fontsize)設置兩軸上值的字體大小，對餅圖無效。

setAxisValuesNumberX(integer number)設置x軸上顯示的值的個數，此值會自動調整，對餅圖無效。

setAxisValuesNumberY(integer number)設置x軸上顯示的值的個數，此值會自動調整，對餅圖無效。

setAxisWidth(integer width)設置軸的寬度，預設是2。

setBackgroundColor(string hexcolor)設置整個圖表的背景顏色，預設是#FFF。

setBackgroundImage(string filename)設置圖表的背景圖片，圖片會自動沿兩軸重覆。

setBarBorderColor(string hexcolor)設置柱狀圖的條形邊框顏色，只對柱狀圖有效，預設#C4C4C4。

setBarBorderWidth(integer width)設置柱狀圖邊框寬度，只對柱狀圖有效。

setBarColor(string hexcolor)設置柱狀圖所有矩形的顏色，此函數被colorize()函數重寫，只對柱狀圖有效。

setBarOpacity(float opacity)設置柱狀圖的透明度，值在0～1之間，預設0.9。

setBarSpacingRatio(integer ratio)設置柱狀圖矩形間距，由此來控制柱狀圖的寬度，值為0～100之間的整數，預設是10。

setBarValues(boolean values)設置是否在矩形頂端顯示值。

setBarValuesColor(string hexcolor)設置柱狀圖矩形的值的顏色。

setBarValuesDecimals(integer decimals)設置柱狀圖矩形高度的值，值為十進位數，預設auto。

setBarValuesFontSize(integer fontsize)設置柱狀圖矩形值的字體大小，預設8.

 setCanvasIdPrefix(string prefix)自定義生產元素的ID首碼，預設是JSChart，此值一般不用修改。

setDataArray(array data, string id)將數據以數組的形式導入圖表，id參數是可選的，並且可以設置相同的id。

setDataXML(string filename)將數據以xml的形式導入到圖表。

setFlagColor(string hexcolor)為提示標誌設置顏色。

setFlagOffset(integer offset)設置提示標誌的偏移量，只適用於餅圖。

setFlagOpacity(float opacity)設置提示標誌的透明度，0～1之間，預設0.5.

 setFlagRadius(integer radius)設置提示標誌的半徑，預設3.

 setFlagWidth(integer width)設置提示標誌邊框寬度，預設1.

 setGraphExtend(boolean extend)設置是否開啟圖表延伸功能，預設是false，如果打開，雙軸和網格線將擴展當前長度的1/15，這樣可以在樣式上更加美觀.

setGraphLabel(string label)設置自定義圖表水印標簽文字。

setGraphLabelColor(string hexcolor)設置自定義圖表水印標簽顏色。

setGraphLabelFontSize(integer fontsize)設置自定義圖表水印標簽的字體大小，預設8.

 setGraphLabelOpacity(float opacity)設置自定義圖表水印標簽的透明度。

setGraphLabelPosition(string position)設置自定義圖表水印標簽的位置，取值範圍在（nw, ne, sw ，se），分別定位在四個角，預設ne，即右上角。

setGraphLabelShadowColor(string hexcolor)設置自定義圖表水印標簽的陰影顏色。

setGrid(boolean grid)設置是否顯示網格線。

setGridColor(string hexcolor)設置網格線的顏色，預設#C6C6C6。

setGridOpacity(float opacity)設置網格線透明度，取值在0～1之間，預設0.5。

setIntervalEndX(integer end)設置x軸的結束值，如果設置了起始值，則此值必須比起始值大。

setIntervalEndY(integer end)設置y軸的結束值，如果設置了起始值，則此值必須比起始值大。

setIntervalStartX(integer start)設置x軸的起始值，如果設置了結束值，則此值必須比結束值小。

setIntervalStartY(integer start)設置y軸的起始值，如果設置了結束值，則此值必須比結束值小。

setLabelX(array label)在x軸上添加標簽，其參數是兩個值構成的一個數組，第一個參數為標簽在x軸上的位置，第二個值為標簽顯示的內容。

setLabelY(array label)在y軸上添加標簽，其參數是兩個值構成的一個數組，第一個參數為標簽在y軸上的位置，第二個值為標簽顯示的內容。

setLineColor(string hexcolor, string id)設置曲線圖中曲線的顏色。參見曲線圖示例3.

 setLineOpacity(float opacity, string id)設置曲線圖中曲線的透明度，取值0～1之間，預設0.9。參數id的意義同上。

setLineWidth(integer width, string id)設置曲線圖中曲線的寬度，預設2.

 setPieOpacity(float opacity)設置餅圖的透明度，取值0～1，預設1.

 setPiePosition(integer x, integer y)設置餅圖在容器內的位置，預設0，即位於容器的中央.

setPieRadius(integer radius)設置餅圖的半徑。

setPieUnitsColor(string hexcolor)設置餅圖塊名的顏色。

setPieUnitsFontSize(integer fontsize)設置餅圖塊名的字體大小。

setPieUnitsOffset(integer offset)設置餅圖塊名的位置，整數外移，負數內移。

setPieValuesColor(string hexcolor)設置餅圖值的顏色。

setPieValuesDecimals(integer decimals)設置餅圖上的總值。

setPieValuesFontSize(integer fontsize)設置餅圖上值的字體大小。

setPieValuesOffset(integer offset)設置餅圖上值的偏移，整數外移，負數內移，預設-20。

setShowXValues(boolean show)是否顯示x軸上的刻度值。

setShowYValues(boolean show)是否顯示y軸上的刻度值。

setSize(integer x, integer y)預定義容器的大小，需用在draw()函數之前。

setTextPaddingBottom(integer padding)設置x軸上標簽文字與容器下邊的距離，預設1.

 setTextPaddingLeft(integer padding)設置y軸上標簽文字與容器左邊的距離，預設8.

 setTextPaddingTop(integer padding)設置圖表頂端與容器上邊的距離，預設15.

 setTitle(string title)設置圖表標題，預設“JSChart”。

setTitleColor(string hexcolor)設置標題顏色。

setTitleFontSize(integer fontsize)設置標題字體大小。

setTitlePosition(string position)設置標題位置，取值範圍（center, left ， right.）。

setTooltip(array tooltip)設置x軸上提示。

setTooltipBackground(string hexcolor)設置提示背景。

setTooltipBorder(string css)設置提示背景邊框風格，參數是css表達式，預設是 1px solid #d3d3d3。

setTooltipFontColor(string hexcolor)設置提示內容顏色。

setTooltipFontFamily(string font)設置提示字體風格，預設arial.

 setTooltipFontSize(integer fontsize)設置提示內容字體大小，預設12.

 setTooltipOffset(integer offset)設置提示內容偏移，預設7。

setTooltipOpacity(float opacity)設置提示透明度，預設0.7.

 setTooltipPadding(string css)設置提示padding樣式，預設 2px  5px。

setTooltipPosition(string position)設置提示位置,取值範圍 nw, ne, sw and se  預設se。

setLegendShow(boolean show)設置是否顯示圖例
                         -->
</body>

統計指定時間段向各個供應商的採購金額

使用selectsupplier.jsp


action:
@Resource
    private AccountRecordsService accountRecordsService;

    @RequestMapping("/selectSupplier")
    @ResponseBody
    public Object selectSupplier(String start,String end){
        System.out.println("start:"+ start+"||end:"+end);
        Map<String, String> paramMap =new HashMap<String, String>();
        paramMap.put("start", start);
        paramMap.put("end", end);

        return accountRecordsService.selectSupplier(paramMap);
    }

public interface AccountRecordsService extends BaseService<AccountRecords> {
    List<Map<String, Object>> selectSupplier(Map<String,String> paramMap);
}

@Service("accountRecordsService")
public class AccountRecordsServiceImpl extends BaseServiceImpl<AccountRecords>
        implements AccountRecordsService {

    @Override
    public List<Map<String, Object>> selectSupplier(Map<String, String> paramMap) {
        // TODO Auto-generated method stub
        return accountRecordsMapper.selectSupplier(paramMap);
    }

}

public interface AccountRecordsMapper extends BaseMapper<AccountRecords> {
    
    List<Map<String, Object>> selectSupplier(Map<String, String> paramMap);
   
}
  <select id="selectSupplier" parameterType="map" resultType="map">
    <![CDATA[ 
    select sum(ar_payable) total,sup_name from account_records inner join supplier 
    on account_records.sup_id=supplier.sup_id 
    where ar_date >#{start} and ar_date<=#{end} and ar_bus_type='bo' 
    group by sup_name   
     ]]>
  </select>

select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplier.sup_id where ar_date >'2014-01-01' and ar_date<='2015-08-08' and ar_bus_type='bo' group by sup_name

如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同學，可以關註微信公眾號:Java3y


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML 筆記之 HTML 元素
    HTML 不是編程語言，它是一種標記語言 HTML 中常見的幾個名詞是 元素、 標簽(開始標簽和結束標簽)、 屬性、 元素內容 這篇文章將要介紹的是 HTML 元素 HTLM 元素 元素的概念 例子： 運行結果為： 點擊跳轉到百度 上面是一個超鏈接的例子，點擊上面的文字 “點擊跳轉到百度”，就可以跳 ...
  • 一招搞定css頁面佈局
    如何做出漂亮的頁面： 1、 多寫頁面，多改。 2、 多寫頁面，多改。 3、 多寫頁面，多改。 大致的思想步驟： 寫頁面的時候先規劃好大致的分塊，無論是用定位或者浮動，首先要確定要應用的場景，使用完浮動後一定記得清楚浮動，使用定位時要清楚其他盒子會完全忽視這個定位的盒子，如果兩個盒子都是定位並且重疊， ...
  • 【推薦】開源項目minapp－重新定義微信小程式的開發
    **重新定義微信小程式的開發** >官網：[https://qiu8310.github.io/minapp/](https://qiu8310.github.io/minapp/) >作者：[Mora](https://github.com/qiu8310) # minapp **重新定義... ...
  • JavaScript設計模式之單例模式
    單例模式是javascript中最簡單也是最常用的模式之一。這種模式涉及到一個單一的類，該類負責創建自己的對象，同時確保只有單個對象被創建。這個類提供了一種訪問其唯一的對象的方式，可以直接訪問，不需要實例化該類的對象。 單例模式的特點： 1、單例類只能有一個實例。 2、單例類必須自己創建自... ...
  • javascript觀察者模式
    源代碼： <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> ~(function(){ var o = $({}); $.jianting = fu ...
  • 學習筆記：Vue+Node+Mongodb構建簡單商城系統（一）
    所需前置知識： HTML、CSS、JS、Vue、ES6、Npm、Webpack、Node、Express、Mongodb 項目整體架構： IDE：webstorm； 項目建立過程(cmd常用命令行指令）： node的安裝 下載連接：https://nodejs.org/en/ npm的安裝 npm ...
  • angularjs 表單驗證
    一、常用的表單驗證指令 1. 必填項驗證 某個表單輸入是否已填寫，只要在輸入欄位元素上添加HTML5標記required即可： 2. 最小長度 驗證表單輸入的文本長度是否大於某個最小值，在輸入欄位上使用指令ng-minleng= "{number}"： 3. 最大長度 驗證表單輸入的文本長度是否小於 ...
  • 自製軟鍵盤+支付密碼
    在移動端支付密碼或輸入密碼時需要彈出虛擬鍵盤，有些設備在鍵盤彈出時會把文本框擋住，為了相容各種設備，所以需要自製軟鍵盤來替代虛擬鍵盤。 以下是我自製的一個小demo，只能順序輸入和倒序清除，或全部清空； html代碼： js代碼： 效果圖如下： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類