JsChart是什么？
JSChart能夠在網頁上生成圖標，常用于統計信息，十分好用的一個JS組件。
使用JsChart
一。導入jscharts.js
二。編寫jscharts.jsp測試頁面
1.下載JScharts庫 從官網下載JScharts庫，我們使用的是壓縮包里面的jscharts.js文件。它大約150KB。
使用JScharts庫 在網頁文件（如.html或.jsp）包含JScharts庫。
<script type="text/javascript" src="js/jscharts.js"></script>
定義容器 要在網頁文件上顯示JScharts生成的圖像，需要把此圖像放入網頁容器。此網頁容器我們通常用
標簽來定義，而且必須強制性地為此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>統計指定時間段向各個供應商的采購金額使用selectsupplier.jspaction:@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=supplie總結
以上所述是小編給大家介紹的JsChart組件使用詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
