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