原創|使用教程|編輯:鄭恭琳|2015-12-16 11:28:52.000|閱讀 2776 次
概述:本篇教程主要教大家如何給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@fc6vip.cn