FusionCharts图表允许你给图表添加标题、子标题，并且还允许你对它们的属性进行自定义设置。
< 点击下载FusionCharts最新版本>
子标题是略低于标题的文本，如下图所示：
1.设置图表标题和子标题
带有标题和子标题的图表如下图所示：
设置图表标题和子标题所需属性如下表：
| 属性名称 | 描述 |
| caption | 设置图表标题的文本值。 |
| subCaption | 设置图表子标题的文本值。 |
数据结构如下：
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:
< 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" />
2.自定义图表标题和子标题的字体属性
你可以自定义图表的标题和子标题的字体属性。标题和子标题字体颜色设置为栗色且自定义字体大小的2D柱状图表如下：
设置标题和子标题字体所需属性如下表：
| 属性名称 | 描述 |
| captionFont | 设置标题字体。 |
| captionFontColor | 设置标题字体颜色。 |
| captionFontSize | 设置标题字体大小，范围从0到72。 |
| captionFontBold | 设置标题字体是否加粗，其值为1（默认）时加粗，为0时正常显示。 |
| subCaptionFont | 设置子标题字体。 |
| subCaptionFontColor | 设置子标题字体颜色。 |
| subCaptionFontSize | 设置子标题字体大小，从0到72。 |
| subCaptionFontBold | 设置子标题字体是否加粗，其值为1（默认）时加粗，为0时正常显示。 |
自定义图表的标题和子标题字体数据结构如下：
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：
< set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" />
3.配置标题对齐方式
标题右下角对齐的2D柱状图表如下图所示：
配置图表标题对齐方式所需属性如下表所示：
| 属性名称 | 描述 |
| captionAlignment | 设置标题的水平对齐，属性值包括：left、center（默认）、right。 |
| captionOnTop | 设置为1时显示在图表的顶部；设置为0时显示在图表的底部。 |
| alignCaptionWithCanvas | 设置为1时标题与整个画布对齐；设置为0（默认）时标题与整个图表区域对齐。 |
| captionHorizontalPadding | 当标题未设置成水平居中时配置其填充效果（以像素为单位）。 |
配置图表标题的对齐数据结构如下：
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:
< set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" />