JsChart元件使用

Java3y發表於2018-03-04

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>標籤來定義,而且必須強制性地為此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

相關文章