原創|使用教程|編輯:鄭恭琳|2015-12-16 11:28:52.000|閱讀 2787 次
概述:本篇教程主要教大家如何給FusionCharts圖表中數據圖添加自定義漸變效果。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在FusionChart中,你可以為圖表的所有數據圖使用全局漸變顏色。獨立數據圖帶有全局漸變顏色效果的2D柱狀圖表如下圖所示:

下表是為數據圖配置漸變顏色所需的屬性:
| 屬性名稱 | 描述 |
| usePlotGradientColor | 設置為1時使用漸變效果;設置為0(默認)時移除漸變效果。 |
| plotGradientColor | 你可以使用這個屬性給數據圖添加第二種漸變顏色。例如:如果你已經為你的數據列指定了一種顏色,現在你想以白色結束漸變效果,那么你需要指定#ffffff(白色)作為這個屬性的值。 |
上圖所示的圖表數據結構如下:
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
"usePlotGradientColor": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000",
"color": "#008ee4"
},
{
"label": "Q2",
"value": "1450000",
"color": "#9b59b6"
},
{
"label": "Q3",
"value": "1730000",
"color": "#6baa01"
},
{
"label": "Q4",
"value": "2120000",
"color": "#e44a00"
}
]
}
XML:
<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" theme="fint" numberprefix="$" useplotgradientcolor="1">
< set label="Q1" value="1950000" color="#008ee4" />
< set label="Q2" value="1450000" color="#9b59b6" />
< set label="Q3" value="1730000" color="#6baa01" />
< set label="Q4" value="2120000" color="#e44a00" />
</chart>
除了基礎的漸變效果,你還可以自定義漸變的傾斜角度、數據圖的填充率。

下表是配置漸變效果用到的屬性:
| 屬性名稱 | 描述 |
| plotFillAngle | 用來設置(柱狀圖、面積圖和餅圖)漸變的填充角度,取值范圍從0到360。 |
| plotFillRatio | 以逗號分隔的格式指定漸變效果的開始和結束。例如“20,40”將漸變效果設置為從寬度的20%處開始40%處結束。漸變開始前的顏色將被設置為數據圖的繪制顏色,漸變結束后的將被置為漸變填充顏色。 |
上圖所示的自定義漸變效果數據結構如下:
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showshadow": "1",
"usePlotGradientColor": "1",
"plotGradientColor": "#003366",
"plotFillAngle": "0",
"plotFillRatio": "0,100"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}
XML:
<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint" showshadow="1" useplotgradientcolor="1" plotgradientcolor="#003366" plotfillangle="0" plotfillratio="0,100">
< set label="Q1" value="1950000" />
< set label="Q2" value="1450000" />
< set label="Q3" value="1730000" />
< set label="Q4" value="2120000" />
</chart>
購買最新正版授權!""
慧都年終盛典火爆開啟,一年僅一次的最強促銷,破冰鉅惠不容錯過!!優惠詳情點擊查看>>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn