半岛外围网上直营

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>

购买最新正版授权！""

慧都年终盛典火爆开启，一年仅一次的最强促销，破冰钜惠不容错过！！优惠详情点击查看>>