原創(chuàng)|使用教程|編輯:鄭恭琳|2015-12-09 11:13:06.000|閱讀 5781 次
概述:本篇教程主要教大家如何自定義FusionCharts圖表中數(shù)據(jù)圖形的顏色。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
FusionCharts的數(shù)據(jù)圖形是指柱形圖中的列、折線圖中的折線、餅圖/環(huán)形圖中的切片。該部分教程將展示如何通過顏色、漸變和懸停效果來增強(qiáng)數(shù)據(jù)圖形使之看起來效果更好。
FusionCharts允許你為圖表中每一個(gè)單獨(dú)的數(shù)據(jù)塊指定自定義顏色。下圖所示的是一個(gè)以顏色區(qū)分季度的2D柱狀圖:

下表是自定義某個(gè)單獨(dú)的數(shù)據(jù)塊顏色所需屬性:
| 屬性名稱 | 描述 |
| color | 設(shè)置數(shù)據(jù)圖顏色,以16進(jìn)制,如:#00ffaa。 |
| paletteColors | 指定數(shù)據(jù)項(xiàng)自定義十六進(jìn)制顏色列表。顏色列表由逗號(hào)分開,如:“paletteColors”:“#eed17f,#97cbe7,#b0d67a”。 |
上面所示圖表的自定義單獨(dú)數(shù)據(jù)塊顏色的數(shù)據(jù)結(jié)構(gòu)如下:
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000",
"color": "#008ee4"
},
{
"label": "Feb",
"value": "810000",
"color": "#008ee4"
},
{
"label": "Mar",
"value": "720000",
"color": "#008ee4"
},
{
"label": "Apr",
"value": "550000",
"color": "#9b59b6"
},
{
"label": "May",
"value": "910000",
"color": "#9b59b6"
},
{
"label": "Jun",
"value": "510000",
"color": "#9b59b6"
},
{
"label": "Jul",
"value": "680000",
"color": "#6baa01"
},
{
"label": "Aug",
"value": "620000",
"color": "#6baa01"
},
{
"label": "Sep",
"value": "610000",
"color": "#6baa01"
},
{
"label": "Oct",
"value": "490000",
"color": "#e44a00"
},
{
"label": "Nov",
"value": "900000",
"color": "#e44a00"
},
{
"label": "Dec",
"value": "730000",
"color": "#e44a00"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" theme="fint">
< set label="Jan" value="420000" color="#008ee4" />
< set label="Feb" value="810000" color="#008ee4" />
< set label="Mar" value="720000" color="#008ee4" />
< set label="Apr" value="550000" color="#9b59b6" />
< set label="May" value="910000" color="#9b59b6" />
< set label="Jun" value="510000" color="#9b59b6" />
< set label="Jul" value="680000" color="#6baa01" />
< set label="Aug" value="620000" color="#6baa01" />
< set label="Sep" value="610000" color="#6baa01" />
< set label="Oct" value="490000" color="#e44a00" />
< set label="Nov" value="900000" color="#e44a00" />
< set label="Dec" value="730000" color="#e44a00" />
</chart>
你可以在多列圖表中為每個(gè)列指定不同的顏色(或在單列圖表中為不同的數(shù)據(jù)塊指定不同的顏色),顏色列表用逗號(hào)隔開。列表中的顏色是以循環(huán)的方式為每個(gè)數(shù)據(jù)列上色的。
配置不同顏色的2D多列圖表如下圖所示:

下表是指定數(shù)據(jù)列顏色所需屬性:
| 屬性名稱 | 描述 |
| paletteColors | 指定數(shù)據(jù)項(xiàng)自定義十六進(jìn)制顏色列表。顏色列表由逗號(hào)分開,如:“paletteColors”:“#eed17f,#97cbe7,#b0d67a”。 |
上面圖表中所示的用不同顏色指定不同數(shù)據(jù)列數(shù)據(jù)結(jié)構(gòu)如下:
JSON:
{
"chart": {
"caption": "Quarterly Sales - By employee",
"subcaption": "Last year",
"xaxisname": "Employee",
"yaxisname": "Amount (in USD)",
"numberprefix": "$",
"showValues": "0",
"paletteColors": "#EED17F,#97CBE7,#074868,#B0D67A,#2C560A,#DD9D82",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Mark"
},
{
"label": "John"
},
{
"label": "Symonds"
},
{
"label": "Peter"
}
]
}
],
"dataset": [
{
"seriesname": "Q1",
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
}
]
},
{
"seriesname": "Q2",
"data": [
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
}
]
},
{
"seriesname": "Q3",
"data": [
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"seriesname": "Q4",
"data": [
{
"value": "35000"
},
{
"value": "27500"
},
{
"value": "32500"
},
{
"value": "34000"
}
]
}
]
}
XML:
<chart caption="Quarterly Sales - By employee" subcaption="Last year" xaxisname="Employee" yaxisname="Amount (in USD)" numberprefix="$" showvalues="0" palettecolors="#EED17F,#97CBE7,#074868,#B0D67A,#2C560A,#DD9D82" theme="fint">
<categories>
< category label="Mark" />
< category label="John" />
< category label="Symonds" />
< category label="Peter" />
</categories>
<dataset seriesname="Q1">
< set value="27400" />
< set value="29800" />
< set value="25800" />
< set value="26800" />
</dataset>
<dataset seriesname="Q2">
< set value="29600" />
< set value="32600" />
< set value="31800" />
< set value="36700" />
</dataset>
<dataset seriesname="Q3">
< set value="29700" />
< set value="31900" />
< set value="34800" />
< set value="24800" />
</dataset>
<dataset seriesname="Q4">
< set value="35000" />
< set value="27500" />
< set value="32500" />
< set value="34000" />
</dataset>
</chart>
購買最新正版授權(quán)!""
慧都年終盛典火爆開啟,一年僅一次的最強(qiáng)促銷,破冰鉅惠不容錯(cuò)過!!優(yōu)惠詳情點(diǎn)擊查看>>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn