FusionCharts圖表允許你給圖表添加標(biāo)題、子標(biāo)題，并且還允許你對它們的屬性進行自定義設(shè)置。

< 點擊下載FusionCharts最新版本>

子標(biāo)題是略低于標(biāo)題的文本，如下圖所示：

1.設(shè)置圖表標(biāo)題和子標(biāo)題

帶有標(biāo)題和子標(biāo)題的圖表如下圖所示：

設(shè)置圖表標(biāo)題和子標(biāo)題所需屬性如下表：

數(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"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount(In USD)" numberprefix="$" theme="fint">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
</chart>

2.自定義圖表標(biāo)題和子標(biāo)題的字體屬性

你可以自定義圖表的標(biāo)題和子標(biāo)題的字體屬性。標(biāo)題和子標(biāo)題字體顏色設(shè)置為栗色且自定義字體大小的2D柱狀圖表如下：

設(shè)置標(biāo)題和子標(biāo)題字體所需屬性如下表：

自定義圖表的標(biāo)題和子標(biāo)題字體數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "captionFont": "Arial",
        "captionFontSize": "18",
        "captionFontColor": "#993300",
        "captionFontBold": "1",
        "subcaptionFont": "Arial",
        "subcaptionFontSize": "14",
        "subcaptionFontColor": "#993300",
        "subcaptionFontBold": "0",
        "theme": "fint"
    },
    "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="$" captionfont="Arial" captionfontsize="18" captionfontcolor="#993300" captionfontbold="1" subcaptionfont="Arial" subcaptionfontsize="14" subcaptionfontcolor="#993300" subcaptionfontbold="0" theme="fint">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

3.配置標(biāo)題對齊方式

標(biāo)題右下角對齊的2D柱狀圖表如下圖所示：

配置圖表標(biāo)題對齊方式所需屬性如下表所示：

配置圖表標(biāo)題的對齊數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "(Last year)",
        "rotateYAxisName": "0",
        "numberPrefix": "$",
        "alignCaptionWithCanvas": "1",
        "captionHorizontalPadding": "2",
        "captionOnTop": "0",
        "captionAlignment": "right",
        "theme": "fint"
    },
    "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)" rotateyaxisname="0" numberprefix="$" aligncaptionwithcanvas="1" captionhorizontalpadding="2" captionontop="0" captionalignment="right" theme="fint">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

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

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