JsChart組件使用

時間 2019-11-29

標籤 jschart 組件使用简体版

原文原文鏈接

JsChart是什麼？

JSChart可以在網頁上生成圖標，經常使用於統計信息，十分好用的一個JS組件。javascript

使用JsChart

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

下載JScharts庫

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

使用JScharts庫

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

<script type="text/javascript" src="js/jscharts.js"></script>

定義容器

要在網頁文件上顯示JScharts生成的圖像，須要把此圖像放入網頁容器。此網頁容器咱們一般用json

標籤來定義，並且必須強制性地爲此DIV元素指定惟一的ID值。好比：

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

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

顯示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>

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

使用selectsupplier.jspjsp

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