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>
購買最新正版授權！""
慧都年終盛典火爆開啟，一年僅一次的最強促銷，破冰鉅惠不容錯過??！優惠詳情點擊查看>>
標簽：
JavaScript 圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
金喜正規買球 
18次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線