FusionCharts中文教程：自定义图表的标题和子标题

FusionCharts图表允许你给图表添加标题、子标题，并且还允许你对它们的属性进行自定义设置。

?

< 点击下载FusionCharts最新版本>

?

子标题是略低于标题的文本，如下图所示：

1.设置图表标题和子标题

带有标题和子标题的图表如下图所示：

设置图表标题和子标题所需属性如下表：

数据结构如下：
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.自定义图表标题和子标题的字体属性

你可以自定义图表的标题和子标题的字体属性。标题和子标题字体颜色设置为栗色且自定义字体大小的2D柱状图表如下：

设置标题和子标题字体所需属性如下表：

自定义图表的标题和子标题字体数据结构如下：
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.配置标题对齐方式

标题右下角对齐的2D柱状图表如下图所示：

配置图表标题对齐方式所需属性如下表所示：

配置图表标题的对齐数据结构如下：
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>

FusionCharts中文教程：自定义图表的标题和子标题

原文：http://huang-xiaok.iteye.com/blog/2261407