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

< 立即下載FusionCharts最新版本>

自定義某個單獨數據塊的顏色

FusionCharts允許你為圖表中每一個單獨的數據塊指定自定義顏色。下圖所示的是一個以顏色區分季度的2D柱狀圖：

下表是自定義某個單獨的數據塊顏色所需屬性：

上面所示圖表的自定義單獨數據塊顏色的數據結構如下：

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>

自定義不同數據列的顏色

你可以在多列圖表中為每個列指定不同的顏色（或在單列圖表中為不同的數據塊指定不同的顏色），顏色列表用逗號隔開。列表中的顏色是以循環的方式為每個數據列上色的。
配置不同顏色的2D多列圖表如下圖所示：

下表是指定數據列顏色所需屬性：

上面圖表中所示的用不同顏色指定不同數據列數據結構如下：

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>

購買最新正版授權！""

慧都年終盛典火爆開啟，一年僅一次的最強促銷，破冰鉅惠不容錯過！！優惠詳情點擊查看>>