FusionCharts中文教程：自定义图表的X轴和Y轴

FusionCharts允许你给图表添加X轴和Y轴，并且对其属性进行配置，你可以配置X、Y轴的名称、字体属性以及边框属性。下面从四个方面来逐一介绍如何自定义X、Y轴。

< 点击下载FusionCharts最新版本>

1.设置轴名称

X轴名称为“Quarter”且Y轴名称为“Amount (In USD)”的2D柱状图表如下图所示：

配置图表轴名称所需属性如下表所示：

指定图表轴名称的数据结构如下：
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轴字体所需属性如下表：

配置轴名称字体数据结构如下：
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柱状图如下图所示：

配置轴名称边框所需属性如下表：

配置轴名称边框属性的数据结构如下：
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柱状图表如下图所示：

设置轴名称背景所需属性如下表：

配置轴名称字体透明度及属性的数据结构如下：
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>

FusionCharts中文教程：自定义图表的X轴和Y轴

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