FusionCharts的數(shù)據(jù)圖形是指柱形圖中的列、折線圖中的折線、餅圖/環(huán)形圖中的切片。該部分教程將展示如何通過顏色、漸變和懸停效果來增強(qiáng)數(shù)據(jù)圖形使之看起來效果更好。

< 立即下載FusionCharts最新版本>

自定義某個(gè)單獨(dú)數(shù)據(jù)塊的顏色

FusionCharts允許你為圖表中每一個(gè)單獨(dú)的數(shù)據(jù)塊指定自定義顏色。下圖所示的是一個(gè)以顏色區(qū)分季度的2D柱狀圖：

下表是自定義某個(gè)單獨(dú)的數(shù)據(jù)塊顏色所需屬性：

上面所示圖表的自定義單獨(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>

自定義不同數(shù)據(jù)列的顏色

你可以在多列圖表中為每個(gè)列指定不同的顏色（或在單列圖表中為不同的數(shù)據(jù)塊指定不同的顏色），顏色列表用逗號(hào)隔開。列表中的顏色是以循環(huán)的方式為每個(gè)數(shù)據(jù)列上色的。
配置不同顏色的2D多列圖表如下圖所示：

下表是指定數(shù)據(jù)列顏色所需屬性：

上面圖表中所示的用不同顏色指定不同數(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)擊查看>>