FusionCharts中文教程：自定义图表的X轴和Y轴 fusioncharts教程图表工具数据可视化工具

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>