FusionCharts允许你给图表添加X轴和Y轴，并且对其属性进行配置，你可以配置X、Y轴的名称、字体属性以及边框属性。下面从四个方面来逐一介绍如何自定义X、Y轴。
< 点击下载FusionCharts最新版本>
1.设置轴名称
X轴名称为“Quarter”且Y轴名称为“Amount (In USD)”的2D柱状图表如下图所示：
配置图表轴名称所需属性如下表所示：
| 属性名称 | 描述 |
| xAxisName | 设置图表的X轴标题。 |
| yAxisName | 设置图表的Y轴标题。 |
指定图表轴名称的数据结构如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount {br}(In USD)",
"rotateYAxisName": "0",
"numberPrefix": "$",
"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 {br}(In USD)" rotateyaxisname="0" numberprefix="$" theme="fint">
< set label="Q1" value="1950000" />
< set label="Q2" value="1450000" />
< set label="Q3" value="1730000" />
< set label="Q4" value="2120000" />
</chart>
2.设置轴名称的字体属性
你可以通过配置轴名称的属性使之看起来更美观，配置过轴名称字体属性的2D柱状图如下所示：
配置X轴、Y轴字体所需属性如下表：
| 属性名称 | 描述 |
| xAxisNameFont (yAxisNameFont) | 设置X轴（Y轴）名称的字体。 |
| xAxisNameFontColor (yAxisNameFontColor) | 设置X轴（Y轴）名称的颜色。 |
| xAxisNameFontSize (yAxisNameFontSize) | 设置X轴（Y轴）名称的字体大小，从0到72。 |
| xAxisNameFontBold (yAxisNameFontBold) | 为1（默认）时将X轴（Y轴）名称设置为加粗；为0时设置为正常。 |
| xAxisNameFontItalic (yAxisNameFontItalic) | 为1时将X轴（Y轴）名称设置为斜体；为0（默认）时设置为正常。 |
配置轴名称字体数据结构如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"datalabelColor": "#999999",
"xAxisNameFont": "Arial",
"xAxisNameFontSize": "12",
"xAxisNameFontColor": "#993300",
"xAxisNameFontBold": "1",
"xAxisNameFontItalic": "1",
"xAxisNameAlpha": "80",
"yAxisNameFont": "Arial",
"yAxisNameFontSize": "12",
"yAxisNameFontColor": "#993300",
"yAxisNameFontBold": "1",
"yAxisNameFontItalic": "1",
"yAxisNameAlpha": "80",
"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="$" datalabelcolor="#999999" xaxisnamefont="Arial" xaxisnamefontsize="12" xaxisnamefontcolor="#993300" xaxisnamefontbold="1" xaxisnamefontitalic="1" xaxisnamealpha="80" yaxisnamefont="Arial" yaxisnamefontsize="12" yaxisnamefontcolor="#993300" yaxisnamefontbold="1" yaxisnamefontitalic="1" yaxisnamealpha="80" 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柱状图如下图所示：
配置轴名称边框所需属性如下表：
| 属性名称 | 描述 |
| xAxisNameBorderColor (yAxisNameBorderColor) | 设置轴名称边框颜色。 |
| xAxisNameBorderAlpha (yAxisNameBorderAlpha) | 设置轴名称边框的透明度。 |
| xAxisNameBorderPadding (yAxisNameBorderPadding) | 设置轴名称边框的填充效果。 |
| xAxisNameBorderRadius (yAxisNameBorderRadius) | 设置轴名称边框的半径。 |
| xAxisNameBorderThickness (yAxisNameBorderThickness) | 设置轴名称边框的厚度。 |
| xAxisNameBorderDashed (yAxisNameBorderDashed) | 为1时设置轴名称边框为虚线；为0时移除虚线。 |
| xAxisNameBorderDashLen (yAxisNameBorderDashLen) | 设置轴名称虚线边框效果中的短线长度。 |
| xAxisNameBorderDashGap (yAxisNameBorderDashGap) | 设置轴名称虚线边框效果中两个短线之间的空白距离。 |
配置轴名称边框属性的数据结构如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"xAxisNamePadding": "20",
"yAxisNamePadding": "10",
"xAxisNameBorderColor": "#6666FF",
"xAxisNameBorderAlpha": "50",
"xAxisNameBorderPadding": "6",
"xAxisNameBorderRadius": "3",
"xAxisNameBorderThickness": "2",
"xAxisNameBorderDashed": "1",
"xAxisNameBorderDashLen": "4",
"xAxisNameBorderDashGap": "2",
"yAxisNameBorderColor": "#6666FF",
"yAxisNameBorderAlpha": "50",
"yAxisNameBorderPadding": "6",
"yAxisNameBorderRadius": "3",
"yAxisNameBorderThickness": "2",
"yAxisNameBorderDashed": "1",
"yAxisNameBorderDashLen": "4",
"yAxisNameBorderDashGap": "2",
"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="$" xaxisnamepadding="20" yaxisnamepadding="10" xaxisnamebordercolor="#6666FF" xaxisnameborderalpha="50" xaxisnameborderpadding="6" xaxisnameborderradius="3" xaxisnameborderthickness="2" xaxisnameborderdashed="1" xaxisnameborderdashlen="4" xaxisnameborderdashgap="2" yaxisnamebordercolor="#6666FF" yaxisnameborderalpha="50" yaxisnameborderpadding="6" yaxisnameborderradius="3" yaxisnameborderthickness="2" yaxisnameborderdashed="1" yaxisnameborderdashlen="4" yaxisnameborderdashgap="2" theme="fint"> < set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" /> </chart>
4.设置轴名称的字体透明度和字体背景
轴名称背景设置为蓝色且设置高透明度的2D柱状图表如下图所示：
设置轴名称背景所需属性如下表：
| 属性名称 | 描述 |
| xAxisNameFontAlpha (yAxisNameFontAlpha) | 设置轴名称字体的透明度。 |
| xAxisNameBgColor (yAxisNameBgColor) | 设置轴名称的背景颜色。 |
| xAxisNameBgAlpha (yAxisNameBgAlpha) | 设置轴名称的背景透明度。 |
| xAxisNameAlpha (yAxisNameAlpha) | 设置轴名称的透明度。 |
配置轴名称字体透明度及属性的数据结构如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"yAxisNamePadding": "14",
"numberPrefix": "$",
"xAxisNameFont": "Arial",
"xAxisNameFontSize": "14",
"xAxisNameBgColor": "#3399ff",
"xAxisNameBgAlpha": "20",
"xAxisNameFontAlpha": "50",
"xAxisNameBorderPadding": "10",
"yAxisNameFont": "Arial",
"yAxisNameFontSize": "14",
"yAxisNameBgColor": "#3399ff",
"yAxisNameBgAlpha": "20",
"yAxisNameFontAlpha": "50",
"yAxisNameBorderPadding": "10",
"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)" yaxisnamepadding="14" numberprefix="$" xaxisnamefont="Arial" xaxisnamefontsize="14" xaxisnamebgcolor="#3399ff" xaxisnamebgalpha="20" xaxisnamefontalpha="50" xaxisnameborderpadding="10" yaxisnamefont="Arial" yaxisnamefontsize="14" yaxisnamebgcolor="#3399ff" yaxisnamebgalpha="20" yaxisnamefontalpha="50" yaxisnameborderpadding="10" theme="fint"> < set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" /> </chart>