輕量級圖形報表工具JSCharts (JSChart)，内置函數中文參考（二）

1. 執行個體化 JSCharts
var mycharts=new JSCharts(“ chartId”,”bar ” );
注：chartId-<div>标簽的id、bar-圖的類型 如（餅圖、線圖 等。。。）。
2.JSCharts 設定資料。
 var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
mycharts.setDataArray(myData);  注：myData 為json 資料。
mycharts.setDataXML(”data.xml”)   注：data.xml 為xml檔案。
如：
   <?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
<dataset type="line">
<data unit="10" value="10"/>
<data unit="15" value="5"/>
<data unit="25" value="25"/>
<data unit="30" value="20"/>
</dataset>
</JSChart>
3. 設定背景顔色
myChart.setBackgroundColor（“#FF0000”）；
4. 自定義Y軸名稱
   myChart.setAxisNameX(“辦件量”)；
5. 自定義X軸名稱
    myChart.setAxisNameY（“月份”）;
6. 自定義圖表大小myChart.setSize（500,300）；注：寬度500,、高度：300
7.自定義圖表标題
myChart.setTitle（“我的圖表标題”）;
8.自定義标題樣色 
myChart.setTitleColor(“#FF0000”);
9.自定義标題字型大小
myChart.setTitleFontSize( 12 );
10.折線圖屬性
myChart.setDataArray（myData2，“second line”）; 注：第二條線的資料
myChart.setLineColor('#ff0f0f', 'first line'); 注：第一條線的顔色
myChart.setLineWidth（5，“second line”）注：第二條線的寬度。
myChart.setTooltip（[15，“我的工具提示”，“second line”]）;?????
11. 使用optionsetoptionset是一個特殊的節點，它可以插入XML檔案中所使用的資料導入到
圖表。<JSChart>
<dataset>
     ……….
</dataset>
 
<optionset>
<option set="setBackgroundColor" value="'#efe'"/>
<option set="setAxisNameX" value="'Custom X軸Name'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'My圖Title'"/>
<option set="setTitleColor" value="'#5555AA'"/>
<option set="setTitleFontSize" value="10"/></ optionset>
</JSChart>
圖11 - 在一個XML檔案中的示例使用optionset

<option>标簽有兩個強制性的屬性。第一個屬性是設定，實際上是通常
JavaScript函數的名稱。第二個屬性是價值和代表的确切參數
将使用功能，包括任何逗号或引号（總是使用單引号内
值，因為雙引号會改變XML文法）。
當使用多個資料集線圖表和不同的定制需要不同的
線，資料集必須接受必須在第二個參數使用id屬性
在下面的例子中所述的選項：

<？XML版本=“1.0”？>
<JSChart>
<dataset type="line" id="first line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset><dataset type="line" id="second line">
<data unit="10" value="10"/>
<data unit="15" value="5"/>
<data unit="25" value="25"/>
<data unit="30" value="20"/></dataset>
 
<optionset>
<option set="setBackgroundColor" value="'#efe'"/>
<option set="setAxisNameX" value="'Custom X軸Name'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setLineColor" value="'#ff0f0f','first line'"/>
<option set="setLineWidth" value="5,'second line'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'My圖Title'"/>
<option set="setTitleColor" value="'#5555AA'"/>
<option set="setTitleFontSize" value="10"/>
<option set="setTooltip" value="[15,'My Tooltip','first line']"/>
</ optionset></JSChart>
 
 
 
 
 
12. 自定義的顔色
var myColors = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');
myChart.colorizeBars(myColors); 注：柱子的顔色
myChart.colorizePie（myColors）；注：餅圖的顔色
xml版本
<colorset>
<color value="#0f0"/>
<color value="#ff0000"/>
<color value="#00f"/>
<color value="#ff0"/>
<color value="#00ffff"/>
</ colorset>13.圖表函數
colorizePie(array colordata)；     注：colordata-顔色數組。   餅圖colorizeBars(array colordata)      注：colordata-顔色數組。   柱狀圖
draw()                        注：畫圖。
resize(integer x, integer y)         注：圖表寬度、高度。
setAxisColor(string hexcolor)  注：設定兩個軸的顔色。
setAxisNameColor(string hexcolor) 注：設定為兩軸名稱的顔色。如：#ff0000
setAxisNameFontSize(integer fontsize) 注：設定為兩軸名稱設定字型大小。
setAxisNameX(string axisname)     注：設定X軸的名稱
setAxisNameY(string axisname)     注：設定Y軸的名稱
setAxisPaddingBottom(integer padding) 注：設定X軸與底部邊框的距離。
setAxisPaddingLeft(integer padding)   注：設定Y軸與左邊邊框的距離
setAxisPaddingRight(integer padding)  注：設定右填充與右邊邊邊框的距離
setAxisPaddingTop(integer padding)  注：設定上填充與上邊邊邊框的距離
setAxisValuesColor(string hexcolor)  注：設定顔色為X和Y軸的值。
setAxisValuesDecimals(integer decimals)注：設定線圖X和Y軸的值的小數數
setAxisValuesFontSize(integer fontsize) 注：設定兩軸字型大小的值
setAxisValuesNumberX(integer number)注:設定Y軸的數量0和1作為值顯示
setAxisValuesNumberY(integer number) 注：設定X軸的數量。同上↑
setAxisValuesPrefixX(string prefix)     注：給X軸的值添加字首。
setAxisValuesPrefixY(string prefix)     注：給Y軸的值添加字首。
setAxisValuesSuffixX(string suffix)     注：給X軸的值添加字尾。
setAxisValuesSuffixY(string suffix)     注：給Y軸的值添加字尾。
setAxisWidth(integer width)           注：設定兩軸的寬度。
setBackgroundColor(string hexcolor)    注：設定整個圖表的背景顔色
setBackgroundImage(string filename)    注：設定整個圖表的背景圖像
setBarBorderColor(string hexcolor)      注：設定柱狀圖 柱子的邊框顔色
setBarBorderWidth(integer width)       注： 設定柱狀圖 柱子邊框寬度。
setBarColor(string hexcolor)            注：設定柱狀圖 柱子的顔色。
setBarOpacity(float opacity)            注：設定柱子的透明度。
setBarSpacingRatio(integer ratio)        注：兩個柱子之間的距離（1-100）
setBarValues(boolean values)           注：柱子上面是否顯示值。
setBarValuesColor(string hexcolor)       注：柱子上面值的顔色。
setBarValuesDecimals(integer decimals)   注：柱子上值的小數數量。
setBarValuesFontSize(integer fontsize)    注：柱子上值的字型大小。
setBarValuesPrefix(string prefix)         注：柱子上值添加的字首。
setBarValuesSuffix(string suffix)         注：柱子上值添加的字尾。
setCanvasIdPrefix(string prefix)  注：自定義連接配接到生成的<canvas> ID的字首
setFlagColor(string hexcolor)       注：設定工具提示标志的顔色。
setFlagOffset(integer offset)        注：餅圖偏移，設定提示标志。
setFlagOpacity(float opacity)       注：設定工具提示标志的透明度。
setFlagRadius(integer radius)       注：設定工具提示标志半徑
setFlagWidth(integer width)        注：設定提示标志邊框的寬度
setGraphExtend(boolean extend)    注：切換圖形擴充選項。為真時，圖形的軸和網格線将延長長度等于軸長度15。
setGraphLabel(string label)     注：設定自定義圖形标記（水印）的字元串。
setGraphLabelColor(string hexcolor)  注：設定為自定義圖表标簽的顔色。
setGraphLabelFontSize(integer fontsize)注:設定為自定義圖表标簽的字型大小
setGraphLabelOpacity(float opacity)   注：設定為自定義圖表标簽的透明度
setGraphLabelPosition(string position)  注：設定自定義的圖表标簽的位置。
setGraphLabelShadowColor(string hexcolor)注：設定為自定義圖表标簽陰影顔色。
setGrid(boolean grid)         注：此設定為真或假無論是表演或圖表背後的網格。  
setGridColor(string hexcolor)   注：設定網格顔色
setGridOpacity(float opacity)   注：設定網格透明度。
setIntervalEndX(integer end)   注：用來隻顯示與援助軸間隔設定圖的一個片段。
setIntervalEndY(integer end)   注：用來隻顯示與援助軸間隔設定圖的一個片段。
setIntervalStartX(integer start)  注：用來隻顯示與援助軸間隔設定圖的一個片段。
setIntervalStartY(integer start)  注：用來隻顯示與援助軸間隔設定圖的一個片段。
setLabelX(array label)  注：定義X軸的标簽。參數是一個兩個元素的數組
setLabelY(array label)  注：定義Y軸的标簽。參數是一個兩個元素的數組
setLineColor(string hexcolor, string id)    注：設定線顔色，和第幾天線
setLineOpacity(float opacity, string id)    注：設定線的透明度。
setLineWidth(integer width, string id)注：設定線的寬度。
setPieOpacity(float opacity)注：設定餅圖餅圖的透明度
setPiePosition(integer x, integer y)      注：設定内<canvas>的餡餅位置。
setPieRadius(integer radius)            注：設定餡餅半徑。
setPieUnitsColor(string hexcolor)        注：設定餡餅機關文本的顔色。
setPieUnitsFontSize(integer fontsize)     注：設定餡餅機關文本的字型大小。
setPieUnitsOffset(integer offset)         注：設定餡餅機關文本與餅的距離
setPieValuesColor(string hexcolor)注：設定餡餅的值的顔色。
setPieValuesDecimals(integer decimals)   注：設定餡餅的值的小數位數。
setPieValuesFontSize(integer fontsize)注：設定餡餅的值的字型大小
setPieValuesOffset(integer offset)        注：設定餡餅的值與餅的距離。
setPieValuesPrefix(string prefix)         注：設定餡餅的值文本的字首。
setPieValuesSuffix(string suffix)注：設定餡餅的值文本的字尾。
setShowXValues(boolean show)         注：設定餡餅機關文本是否可見
setShowYValues(boolean show)注：設定餡餅的值是否可見
setSize(integer x, integer y)             注：設定整個圖表的大小。
setTooltip(array tooltip, function callback)  注：定義一個提示。
setTooltipBackground(string hexcolor)     注：設定工具提示的背景顔色。
setTooltipBorder(string css) 注：設定工具提示邊框樣色
setTooltipFontColor(string hexcolor) 注：設定工具提示的内容顔色。
setTooltipFontFamily(string font) 注：設定工具提示的字型類型。
setTooltipFontSize(integer fontsize)  注：設定工具提示内容的字型大小。
setTooltipOffset(integer offset)  注：工具提示與本身的距離
setTooltipOpacity(float opacity)  注：設定工具提示的不透明度。
setTooltipPadding(string css) 注：設定工具提示填充樣試。
setTooltipPosition(string position)  注：提示标志設定的工具提示的位置。