JSChart輕量級圖形報表工具(內建函數中文參考)_javascript技巧

因為網上講這個架構的文章不是很多，而且它本身對中文支援不是很好，手冊什麼的都是英文的，雖然不是很多，但考慮到一些新手可能沒有時間和精力來閱讀參考手冊，為了讓更多的朋友瞭解它，所以工作之餘就大概的翻譯了一下它的內建函數，因為時間倉促，有些地方翻譯的很大概，也難免混雜了一些錯誤，算是拋磚引玉吧，希望大家不明白的地方親手測試一下，參照它的官方提供的例子很容易上手。

JSChart內建函數參考

colorizeBars(array colordata)設定柱狀圖各矩形顏色。
colorizePie(array colordata)設定餅圖各塊顏色。
draw()用在最後，各項設定完畢後，執行此函數畫出圖表。
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。

--完畢

JSChart官方網站http://www.jscharts.com/上面有完整的手冊和樣本。

對於JSChart不支援中文的弊端，早已有高手提供了擴充指令碼，網上很容易找到了，可以在這裡下載。
下載後可以只引用jscharts_mb.js，也可以先引用jscharts.js，再引用jscharts.plug.mb.js，兩種方法任選其一即可。