圖表類UI
Methods
- 
    
staticov.Chart.Bar(parameter)
common/PilotGaea-Chart.js, line 257 - 
    
    
    
新增長條圖
Name Type Description parameterObject 長條圖設定參數
Name Type Description dataSetArray.<Object> 傳入的資料集,形式為陣列物件,ex:[{ label: "標籤1", value:10 }, { label: "標籤2", value: 20 }]
xLabelstring X軸的標籤名稱
yLabelstring Y軸的標籤名稱
titlestring 長條圖的標題
marginnumber 長條圖距離svg邊界的距離,單位為pixel
widthnumber 長條圖的寬,單位為pixel 註:此為整個svg的大小
heightnumber 長條圖的高,單位為pixel 註:此為整個svg的大小
rectPitchnumber 長條圖的間距
colorstring 長條圖的顏色
strokestring 長條圖尺標的顏色
strokeWidthnumber 長條圖尺標的粗細,當數值為0時不會出現尺標
opacitynumber 長條圖顏色的透明度
fontSizenumber 長條圖尺標的字型大小
fontColorstring 長條圖尺標的字的顏色
axisFontSizenumber 長條圖軸的字型大小
axisFontColorstring 長條圖軸的字的顏色
titleFontSizenumber 標題文字的大小
titleFontColorstring 標題文字的顏色
xAxisPosnumber 下標題文字距離長條圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
yAxisPosnumber 左標題文字距離長條圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
titlePosnumber 標題距離長條圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
legentNamestring legent的名稱,如果沒設不會出現legent
legentWidthnumber legent矩形的大小
legentFontSizenumber legent文字的大小
legentPitchnumber legent的間隔
legentPosnumber legent距離長條圖的距離
legentFontColorstring legent的文字顏色,如果沒指定會跟標籤顏色相同
animationTimenumber 顯示動畫的時間,為0則不會跑動畫
Example
要使用的話先產生一個新的長條圖,並用getElement()取得長條圖的節點,最後再加進節點裡顯示,底下範例
var bar = new ov.Chart.Bar(parameter);
document.body.appendChild(bar.getElement()); - 
    
staticov.Chart.LineChart(parameter)
common/PilotGaea-Chart.js, line 587 - 
    
    
    
新增折線圖
Name Type Description parameterObject 折線圖設定參數
Name Type Default Description dataSetArray.<Object> 傳入的資料集,形式為陣列物件,ex:[{ label: "標籤1", value:10 }, { label: "標籤2", value: 20 }]
xTagstring "label" optional X軸的資料屬性名稱
yTagstring "value" optional Y軸的資料屬性名稱
xLabelstring X軸的標籤名稱
yLabelstring Y軸的標籤名稱
titlestring 折線圖的標題
marginnumber 折線圖距離svg邊界的距離,單位為pixel
widthnumber 折線圖的寬,單位為pixel 註:此為整個svg的大小
heightnumber 折線圖的高,單位為pixel 註:此為整個svg的大小
colorstring 折線圖的顏色
strokestring 折線圖尺標的顏色
strokeWidthnumber 折線圖尺標的粗細,當數值為0時不會出現尺標
opacitynumber 折線圖顏色的透明度
fontSizenumber 折線圖尺標的字型大小
fontColorstring 折線圖尺標的字的顏色
axisFontSizenumber 折線圖軸的字型大小
axisFontColorstring 折線圖軸的字的顏色
titleFontSizenumber 標題文字的大小
titleFontColorstring 標題文字的顏色
xAxisPosnumber 下標題文字距離折線圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
yAxisPosnumber 左標題文字距離折線圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
titlePosnumber 標題距離折線圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
legentNamestring legent的名稱,如果沒設不會出現legent
legentWidthnumber legent矩形的大小
legentFontSizenumber legent文字的大小
legentPitchnumber legent的間隔
legentPosnumber legent距離折線圖的距離
legentFontColorstring legent的文字顏色,如果沒指定會跟標籤顏色相同
animationTimenumber 顯示動畫的時間,為0則不會跑動畫
radiusnumber 折線圖的點的大小,為0則不會出現點
Example
要使用的話先產生一個新的折線圖,並用getElement()取得折線圖的節點,最後再加進節點裡顯示,底下範例
var lineChart = new ov.Chart.LineChart(parameter);
document.body.appendChild(lineChart.getElement()); - 
    
staticov.Chart.Pie(parameter)
common/PilotGaea-Chart.js, line 38 - 
    
    
    
新增圓餅圖
Name Type Description parameterObject 圓餅圖設定參數
Name Type Description dataSetArray.<Object> 傳入的資料集,形式為陣列物件,ex:[{ label: "標籤1", value:10 }, { label: "標籤2", value: 20 }]
marginnumber 圓餅圖距離svg邊界的距離,單位為pixel
radiusnumber 圓餅圖半徑,單位為pixel
innrtRadiusnumber 圓餅圖內圈半徑,單位為pixel
titlestring 圓餅圖的標題
colorArray.<string> 圓餅圖的顏色,形式為陣列,ex:["red","blue"] 註:當陣列小於資料數時顏色會巡迴
strokestring 圓餅圖的線框顏色
strokeWidthnumber 圓餅圖線框的粗細,當數值為0時圓餅圖不會有線框
opacitynumber 圓餅圖顏色的透明度
fontSizenumber 圓餅圖字型的大小
fontColorstring 圓餅圖字的顏色
titleFontSizenumber 標題文字的大小
titleFontColorstring 標題文字的顏色
titlePosnumber 標題距離圓餅圖的距離,註:當位置超過邊界時文字可能會消失,可以調整邊框大小解決
legentWidthnumber legent矩形的大小
legentFontSizenumber legent文字的大小
legentPitchnumber legent的間隔
legentPosnumber legent距離圓餅圖的距離
legentFontColorstring legent的文字顏色,如果沒指定會跟標籤顏色相同
roundnumber 圓餅圖文字要取到小數點幾位
animationTimenumber 顯示動畫的時間,為0則不會跑動畫
Example
要使用的話先產生一個新的圓餅圖,並用getElement()取得圓餅圖的節點,最後再加進節點裡顯示,底下範例
var pie = new ov.Chart.Pie(parameter);
document.body.appendChild(pie.getElement());