DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JSChart輕量級圖形報表工具(內置函數中文參考)
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,兩種方法任選其一即可。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved