FlashChart json資料配置 中文文件

2022-03-24 20:23:06 字數 4307 閱讀 3749

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...