flashchart json資料配置說明
有朋友要用flashchart,感覺這個還不錯。就整理了乙份文件。
有不對之處還望大家指出。
目錄title (標題—-可選) 1
bg_colour(背景顏色—可選)… 2
y legend (y軸圖例—–可選) 2
y axis(y軸——可選)… 2
x legend (x軸圖例—–可選) 3
x axis(x軸——可選)… 3
tooltip(提示——可選)… 4
menu(選單—-可選)… 5
elements(必選)… 5
elements.bar(柱狀圖 )… 6
elements.pie(餅狀圖)… 9
elements.area(區域圖)… 10
elements.line(線圖)… 12
flash chart 支援json資料配置所有的屬性,效果。以前從各個方便具體說明json配置屬性,便於查詢。其中紅色字型為需要地方。
各種資料的例子見data-files資料夾。
title (標題—-可選)
所有屬性均可選
text
標題style
css style例」
}}bg_colour(背景顏色—可選)
bg_colour
背景顏色
例「bg_colour」:」#ffffff」
y legend (y軸圖例—–可選)
text
y軸上顯示文字
style
文字css樣式 例
「y_legend」:」 }
y axis(y軸——可選)
max最大值
min最小值
colour
y軸顏色
grid-colour
y軸線條顏色
stroke
y軸寬度
tick-length
y軸標尺長度
steps間距例
「y_axis」:
x legend (x軸圖例—–可選)
text
x軸上顯示文字
style
文字css樣式
例「x_legend」:」}
x axis(x軸——可選)
colour
x軸顏色
offset
是否偏移
布林值,true或false
steps
間隔grid-colour
x軸中間線條顏色
stroke
x軸的寬度
tick-height
標尺高度
labels
資料來源3d
數字3d效果的高度 例
「x_axis」:,
tooltip(提示——可選)
shadow
陰影布林值true或false
stroke
描邊寬度
單位px
colour
描邊顏色
background
背景顏色
title
標題字型css樣式
body
主體字型css樣式
rounded
圓角度例
「tooltip」:」,
「body」:」」
}menu(選單—-可選)
colour
背景顏色
outline-colour
邊框顏色
values
顯示值
例「menu」:,,]
},elements(必選)
可根據其配置出需要的圖表,其共有屬性如下:
type
**型別
可用此配置不同的圖表形式。有柱狀圖,線性圖,餅形圖等。在下面會一一說明
alpha
圖形透明度
colour
圖形顏色
text
文字說明
說明表示資料
font-size
字型大小
values
資料來源
example:,]
}elements.bar(柱狀圖 )
柱狀圖的型別很多。均有type指定:
其效果如圖:
type
型別bar
普通平面柱狀圖
bar_sketch
素描柱狀圖
bar_glass
玻璃高光柱狀圖
bar_3d
3d效果柱狀圖
bar_filled
填充柱狀圖
bar_cylinder
圓柱形柱狀圖
bar_cylinder_outline
帶邊線的圓柱形柱狀圖
bar_round_glass
上圓邊柱狀圖
bar_round
上下圓邊柱狀圖
bar_dome
圓頂柱狀圖
bar_plastic
塑料材質柱狀圖
bar_plastic_flat
扁平塑料材質柱狀圖
outline-colour
外邊線顏色
例子」},
「elements」:[
,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]
},,0,-7]}],
「x_axis」:
{」3d」: 5 },
「y_axis」:
}elements.pie(餅狀圖)
type
型別pie
start-angle
數字–旋轉角度
開始旋轉時候的角度
colours
顏色組多種顏色的時候交替出現
alpha
透明度stroke
外線寬度
animate
動畫效果
設定為false不顯示動畫效果。也可以設定多種動畫效果如**。漸入效果
label-colour
說明文字顏色
不設定時顏色和填充顏色相同
tip提示內容
gradient-fill
漸變填充
no-labels
布林值是否顯示文字說明
radius
弧度根據弧度可改變餅圖大小。
values
資料來源例:,],
「values」 : [
2,3,,]
}]}elements.area(區域圖)
type
型別.area
colour
邊線顏色
fill
填充顏色
fill-alpha
填充透明讀
text
說明文字
width
線條寬度
font-size
字型大小
line-style
線條樣式
dot-size
天寬度dot-style
點樣式values
資料來源 例,
,,],「width」: 2,
「dot-size」: 14,
「dot-style」: ,
「halo-size」: 3,
「colour」: 「#ff9900″,
「fill」: 「#dbecf6″}],
「bg_colour」: 「#ffff00″,
「x_axis」:
},「y_axis」:
}elements.line(線圖)
type
型別line
colour
線條顏色
text
說明文字
font-size
字型大小
width
線條寬度
dot-size
點大小預設為5
dot-style
點寬度線條上點樣式設定
halo-size
發光大小
tip提示
line-style
線條樣css
例子,,
],「title」:」
},「y_axis」:,
「x_axis」:
},「bg_colour」:」#ffffff」
}
Catalan數(卡特蘭數)
卡特蘭數 規定h 0 1,而h 1 1,h 2 2,h 3 5,h 4 14,h 5 42,h 6 132,h 7 429,h 8 1430,h 9 4862,h 10 16796,h 11 58786,h 12 208012,h 13 742900,h 14 2674440,h 15 969484...
卡特蘭數 Catalan數
卡特蘭數 規定h 0 1,而h 1 1,h 2 2,h 3 5,h 4 14,h 5 42,h 6 132,h 7 429,h 8 1430,h 9 4862,h 10 16796,h 11 58786,h 12 208012,h 13 742900,h 14 2674440,h 15 969484...
Catalan數(卡特蘭數)
2012 04 12 21 08 13 標籤 卡特蘭數 原始出處 作者資訊和本宣告。否則將追究法律責任。卡特蘭數 規定h 0 1,而h 1 1,h 2 2,h 3 5,h 4 14,h 5 42,h 6 132,h 7 429,h 8 1430,h 9 4862,h 10 16796,h 11 58...