原創|使用教程|編輯:鄭恭琳|2015-12-21 14:42:36.000|閱讀 2421 次
概述:本篇教程主要教大家如何給FusionCharts圖表中數據圖添加自定義透明度和邊框效果。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Fusioncharts允許你設置數據圖填充顏色的透明度。效果如下圖所示:

下表是自定義數據圖透明度所需的屬性:
| 屬性名稱 | 描述 |
| plotFillAlpha | 用于設置整個圖表對象中所有數據圖的透明度。 |
| alpha | 用于設置單個數據列的透明度。 |
上圖所示的數據圖自定義透明度數據結構如下:
JSON:
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "90",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Previous Year",
"alpha": "30",
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Current Year",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "26800"
}
]
}
]
}
XML:
<chart caption="Comparison of Quarterly Revenue" subcaption="Harry's SuperMart" xaxisname="Quarter" yaxisname="Revenues (In USD)" numberprefix="$" plotfillalpha="90" theme="fint">
<categories>
< category label="Q1" />
< category label="Q2" />
< category label="Q3" />
< category label="Q4" />
</categories>
<dataset seriesname="Previous Year" alpha="30">
< set value="10000" />
< set value="11500" />
< set value="12500" />
< set value="15000" />
</dataset>
<dataset seriesname="Current Year">
< set value="25400" />
< set value="29800" />
< set value="21800" />
< set value="26800" />
</dataset>
</chart>
顯示或隱藏數據圖邊框
默認情況下每一個數據圖(柱狀圖、面積圖、餅圖)都有邊框。你可以選擇顯示也可以隱藏邊框。

自定義數據圖邊框所需屬性:
| 屬性名稱 | 描述 |
| showPlotBorder | 設置為1(默認)時顯示邊框,為0時隱藏邊框。 |
上圖所示圖表的自定義邊框數據結構如下:
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1"
},
"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" showplotborder="1">
< set label="Q1" value="1950000" />
< set label="Q2" value="1450000" />
< set label="Q3" value="1730000" />
< set label="Q4" value="2120000" />
</chart>
使用虛線邊框

自定義虛線邊框所需屬性如下表:
| 屬性名稱 | 描述 |
| plotBorderDashed | 設置整個圖表對象的虛線邊框。為1時設置為虛線邊框,為0(默認)時移除邊框。 |
| plotBorderDashLen | 設置整個圖表對象虛線邊框的短線長度。 |
| plotBorderDashGap | 設置整個圖表對象虛線邊框的短線間間距。 |
| dashed | 設置單個數據列的虛線邊框效果。 |
| dashlen | 設置單個數據列虛線邊框的短線長度。 |
| dashgap | 設置單個數據列虛線邊框的短線間間距。 |
上圖所示圖標的數據結構如下:
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1",
"plotBorderDashed": "1",
"plotBorderDashLen": "4",
"plotBorderDashGap": "4",
"plotBorderThickness": "1",
"plotBorderColor": "#000000"
},
"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" showplotborder="1" plotborderdashed="1" plotborderdashlen="4" plotborderdashgap="4" plotborderthickness="1" plotbordercolor="#000000">
< set label="Q1" value="1950000" />
< set label="Q2" value="1450000" />
< set label="Q3" value="1730000" />
< set label="Q4" value="2120000" />
</chart>
使用圓邊
你可以在2D柱狀圖或條形圖中將數據圖的邊框設置為圓邊效果,如下圖所示:

所需屬性:
| 屬性名稱 | 描述 |
| useRoundEdges | 設置為1時顯示圓邊(玻璃漸變)效果。 |
上圖所示圖表數據結構如下:
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"useRoundEdges": "1"
},
"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" useroundedges="1">
< set label="Q1" value="1950000" />
< set label="Q2" value="1450000" />
< set label="Q3" value="1730000" />
< set label="Q4" value="2120000" />
</chart>
購買最新正版授權!詳情請""
2015歲末掃尾之戰!全球廠商攜手放利!優惠詳情點擊查看>>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn