本篇教程將從字體、背景、邊框三個方面來教大家如何自定義FusionCharts雙Y軸圖表的主次軸標(biāo)題屬性。
< 立即下載體驗FusionCharts>
1.配置主次Y軸名稱的字體屬性
多系列組合2D圖表的主次Y軸名稱字體設(shè)置為斜體效果圖如下：
設(shè)置雙Y軸名稱字體所需屬性如下表：
| 屬性名稱 |
描述 |
| pYAxisName (sYAxisName) |
用于在多系列圖表中設(shè)置主（次）Y軸的名稱。 |
| pYAxisNameFont (sYAxisNameFont) |
設(shè)置主（次）Y軸的字體。 |
| pYAxisNameFontColor (sYAxisNameFontColor) |
設(shè)置主（次）Y軸名稱的字體顏色。 |
| pYAxisNameFontSize (sYAxisNameFontSize) |
設(shè)置主（次）Y軸名稱的字體大小。 |
| pYAxisNameFontBold (sYAxisNameFontBold) |
為1時將主(次)Y軸名稱設(shè)置為加粗；為0時設(shè)置為正常。 |
| pYAxisNameFontItalic (sYAxisNameFontItalic) |
為1時將主(次)Y軸名稱設(shè)置為斜體；為0時設(shè)置為正常。 |
上圖的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"pYAxisNameFont": "Arial",
"pYAxisNameFontSize": "12",
"pYAxisNameFontColor": "#003366",
"pYAxisNameFontBold": "1",
"pYAxisNameFontItalic": "1",
"pYAxisNameAlpha": "50",
"sYAxisNameFont": "Arial",
"sYAxisNameFontSize": "12",
"sYAxisNameFontColor": "#003366",
"sYAxisNameFontBold": "1",
"sYAxisNameFontItalic": "1",
"sYAxisNameAlpha": "50",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Revenues",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
},
{
"seriesName": "Profit %age",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
}
]
}
]
}
XML:
<chart caption="Revenues and Profits" subcaption="For last year" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" pyaxisnamefont="Arial" pyaxisnamefontsize="12" pyaxisnamefontcolor="#003366" pyaxisnamefontbold="1" pyaxisnamefontitalic="1" pyaxisnamealpha="50" syaxisnamefont="Arial" syaxisnamefontsize="12" syaxisnamefontcolor="#003366" syaxisnamefontbold="1" syaxisnamefontitalic="1" syaxisnamealpha="50" theme="fint">
<categories>
< category label="Jan" />
< category label="Feb" />
< category label="Mar" />
< category label="Apr" />
< category label="May" />
< category label="Jun" />
< category label="Jul" />
< category label="Aug" />
< category label="Sep" />
< category label="Oct" />
< category label="Nov" />
< category label="Dec" />
</categories>
<dataset seriesname="Revenues">
< set value="16000" />
< set value="20000" />
< set value="18000" />
< set value="19000" />
< set value="15000" />
< set value="21000" />
< set value="16000" />
< set value="20000" />
< set value="17000" />
< set value="22000" />
< set value="19000" />
< set value="23000" />
</dataset>
<dataset seriesname="Profits" renderas="area" showvalues="0">
< set value="4000" />
< set value="5000" />
< set value="3000" />
< set value="4000" />
< set value="1000" />
< set value="7000" />
< set value="1000" />
< set value="4000" />
< set value="1000" />
< set value="8000" />
< set value="2000" />
< set value="7000" />
</dataset>
<dataset seriesname="Profit %age" parentyaxis="S" renderas="line" showvalues="0">
< set value="25" />
< set value="25" />
< set value="16.66" />
< set value="21.05" />
< set value="6.66" />
< set value="33.33" />
< set value="6.25" />
< set value="25" />
< set value="5.88" />
< set value="36.36" />
< set value="10.52" />
< set value="30.43" />
</dataset>
</chart>
2.配置主（次）Y軸名稱的背景屬性
多系列組合2D圖表的主（次）Y軸名稱藍(lán)色和半透明背景效果如下：
配置雙Y軸名稱所需屬性如下表：
| 屬性名稱 |
描述 |
| pYAxisNameFontAlpha (sYAxisNameFontAlpha) |
設(shè)置主（次）Y軸名稱字體的透明度。 |
| pYAxisNameBgColor (sYAxisNameBgColor) |
設(shè)置主（次）Y軸名稱的字體顏色。 |
| pYAxisNameBgAlpha (sYAxisNameBgAlpha) |
設(shè)置主（次）Y軸名稱的背景透明度。 |
上面所示圖表的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"pYAxisNameFont": "Arial",
"pYAxisNameFontSize": "12",
"pYAxisNameBgColor": "#3399ff",
"pYAxisNameBgAlpha": "20",
"pYAxisNameBorderPadding": "6",
"pYAxisNameFontAlpha": "50",
"sYAxisNameFont": "Arial",
"sYAxisNameFontSize": "12",
"sYAxisNameBgColor": "#3399ff",
"sYAxisNameBgAlpha": "20",
"sYAxisNameBorderPadding": "6",
"sYAxisNameFontAlpha": "50",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Revenues",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
},
{
"seriesName": "Profit %age",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
}
]
}
]
}
XML:
<chart caption="Revenues and Profits" subcaption="For last year" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" pyaxisnamefont="Arial" pyaxisnamefontsize="12" pyaxisnamebgcolor="#3399ff" pyaxisnamebgalpha="20" pyaxisnameborderpadding="6" pyaxisnamefontalpha="50" syaxisnamefont="Arial" syaxisnamefontsize="12" syaxisnamebgcolor="#3399ff" syaxisnamebgalpha="20" syaxisnameborderpadding="6" syaxisnamefontalpha="50" theme="fint">
<categories>
< category label="Jan" />
< category label="Feb" />
< category label="Mar" />
< category label="Apr" />
< category label="May" />
< category label="Jun" />
< category label="Jul" />
< category label="Aug" />
< category label="Sep" />
< category label="Oct" />
< category label="Nov" />
< category label="Dec" />
</categories>
<dataset seriesname="Revenues">
< set value="16000" />
< set value="20000" />
< set value="18000" />
< set value="19000" />
< set value="15000" />
< set value="21000" />
< set value="16000" />
< set value="20000" />
< set value="17000" />
< set value="22000" />
< set value="19000" />
< set value="23000" />
</dataset>
<dataset seriesname="Profits" renderas="area" showvalues="0">
< set value="4000" />
< set value="5000" />
< set value="3000" />
< set value="4000" />
< set value="1000" />
< set value="7000" />
< set value="1000" />
< set value="4000" />
< set value="1000" />
< set value="8000" />
< set value="2000" />
< set value="7000" />
</dataset>
<dataset seriesname="Profit %age" parentyaxis="S" renderas="line" showvalues="0">
< set value="25" />
< set value="25" />
< set value="16.66" />
< set value="21.05" />
< set value="6.66" />
< set value="33.33" />
< set value="6.25" />
< set value="25" />
< set value="5.88" />
< set value="36.36" />
< set value="10.52" />
< set value="30.43" />
</dataset>
</chart>
3.配置主（次）Y軸名稱的邊框?qū)傩?/strong>
多系列2D圖表的主（次）Y軸名稱帶有紫色虛線邊框的效果如下圖所示：
設(shè)置主（次）Y軸名稱邊框所需屬性如下表：
| 屬性名稱 |
描述 |
| pYAxisNameBorderColor (sYAxisNameBorderColor) |
設(shè)置主（次）y軸名稱邊框的顏色。 |
| pYAxisNameBorderAlpha (sYAxisNameBorderAlpha) |
設(shè)置主（次）y軸名稱邊框的透明度。 |
| pYAxisNameBorderPadding (sYAxisNameBorderPadding) |
設(shè)置主（次）y軸名稱邊框的填充效果。 |
| pYAxisNameBorderRadius (sYAxisNameBorderRadius) |
設(shè)置主（次）y軸名稱邊框的直徑。 |
| pYAxisNameBorderThickness (sYAxisNameBorderThickness) |
設(shè)置主（次）y軸名稱邊框的厚度。 |
| pYAxisNameBorderDashed (sYAxisNameBorderDashed) |
為1時將主（次）Y軸邊框設(shè)置為虛線；為0時設(shè)置為正常。 |
| pYAxisNameBorderDashLen (sYAxisNameBorderDashLen) |
設(shè)置主（次）y軸名稱虛線邊框效果中的短線長度。 |
| pYAxisNameBorderDashGap (sYAxisNameBorderDashGap) |
設(shè)置主（次）Y軸名稱虛線邊框效果中兩個短線之間的空白距離。 |
上面所示圖標(biāo)的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %age",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"pYAxisNameBorderColor": "#6666FF",
"pYAxisNameBorderAlpha": "50",
"pYAxisNameBorderPadding": "6",
"pYAxisNameBorderRadius": "0",
"pYAxisNameBorderThickness": "1",
"pYAxisNameBorderDashed": "1",
"pYAxisNameBorderDashLen": "4",
"pYAxisNameBorderDashGap": "2",
"sYAxisNameBorderColor": "#6666FF",
"sYAxisNameBorderAlpha": "50",
"sYAxisNameBorderPadding": "6",
"sYAxisNameBorderRadius": "0",
"sYAxisNameBorderThickness": "1",
"sYAxisNameBorderDashed": "1",
"sYAxisNameBorderDashLen": "4",
"sYAxisNameBorderDashGap": "2",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Revenues",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
},
{
"seriesName": "Profit %age",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
}
]
}
]
}
XML:
<chart caption="Revenues and Profits" subcaption="For last year" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %age" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" pyaxisnamebordercolor="#6666FF" pyaxisnameborderalpha="50" pyaxisnameborderpadding="6" pyaxisnameborderradius="0" pyaxisnameborderthickness="1" pyaxisnameborderdashed="1" pyaxisnameborderdashlen="4" pyaxisnameborderdashgap="2" syaxisnamebordercolor="#6666FF" syaxisnameborderalpha="50" syaxisnameborderpadding="6" syaxisnameborderradius="0" syaxisnameborderthickness="1" syaxisnameborderdashed="1" syaxisnameborderdashlen="4" syaxisnameborderdashgap="2" theme="fint">
<categories>
< category label="Jan" />
< category label="Feb" />
< category label="Mar" />
< category label="Apr" />
< category label="May" />
< category label="Jun" />
< category label="Jul" />
< category label="Aug" />
< category label="Sep" />
< category label="Oct" />
< category label="Nov" />
< category label="Dec" />
</categories>
<dataset seriesname="Revenues">
< set value="16000" />
< set value="20000" />
< set value="18000" />
< set value="19000" />
< set value="15000" />
< set value="21000" />
< set value="16000" />
< set value="20000" />
< set value="17000" />
< set value="22000" />
< set value="19000" />
< set value="23000" />
</dataset>
<dataset seriesname="Profits" renderas="area" showvalues="0">
< set value="4000" />
< set value="5000" />
< set value="3000" />
< set value="4000" />
< set value="1000" />
< set value="7000" />
< set value="1000" />
< set value="4000" />
< set value="1000" />
< set value="8000" />
< set value="2000" />
< set value="7000" />
</dataset>
<dataset seriesname="Profit %age" parentyaxis="S" renderas="line" showvalues="0">
< set value="25" />
< set value="25" />
< set value="16.66" />
< set value="21.05" />
< set value="6.66" />
< set value="33.33" />
< set value="6.25" />
< set value="25" />
< set value="5.88" />
< set value="36.36" />
< set value="10.52" />
< set value="30.43" />
</dataset>
</chart>
購買最新正版授權(quán)！""
慧都年終盛典火爆開啟，一年僅一次的最強促銷，破冰鉅惠不容錯過！！優(yōu)惠詳情點擊查看>>
標(biāo)簽：
JavaScript 圖表圖表庫數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營 
21次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線