< FusionChart最新版本下載>

給數(shù)據(jù)圖添加漸變效果

在FusionChart中，你可以為圖表的所有數(shù)據(jù)圖使用全局漸變顏色。獨(dú)立數(shù)據(jù)圖帶有全局漸變顏色效果的2D柱狀圖表如下圖所示：

下表是為數(shù)據(jù)圖配置漸變顏色所需的屬性：

上圖所示的圖表數(shù)據(jù)結(jié)構(gòu)如下：

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "theme": "fint",
        "numberPrefix": "$",
        "usePlotGradientColor": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000",
            "color": "#008ee4"
        },
        {
            "label": "Q2",
            "value": "1450000",
            "color": "#9b59b6"
        },
        {
            "label": "Q3",
            "value": "1730000",
            "color": "#6baa01"
        },
        {
            "label": "Q4",
            "value": "2120000",
            "color": "#e44a00"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" theme="fint" numberprefix="$" useplotgradientcolor="1">
    < set label="Q1" value="1950000" color="#008ee4" />
    < set label="Q2" value="1450000" color="#9b59b6" />
    < set label="Q3" value="1730000" color="#6baa01" />
    < set label="Q4" value="2120000" color="#e44a00" />
</chart>

自定義漸變屬性

除了基礎(chǔ)的漸變效果，你還可以自定義漸變的傾斜角度、數(shù)據(jù)圖的填充率。

下表是配置漸變效果用到的屬性：

上圖所示的自定義漸變效果數(shù)據(jù)結(jié)構(gòu)如下：

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showshadow": "1",
        "usePlotGradientColor": "1",
        "plotGradientColor": "#003366",
        "plotFillAngle": "0",
        "plotFillRatio": "0,100"
    },
    "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" showshadow="1" useplotgradientcolor="1" plotgradientcolor="#003366" plotfillangle="0" plotfillratio="0,100">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

購(gòu)買最新正版授權(quán)！""

慧都年終盛典火爆開(kāi)啟，一年僅一次的最強(qiáng)促銷，破冰鉅惠不容錯(cuò)過(guò)??！優(yōu)惠詳情點(diǎn)擊查看>>