圖表的畫布是指在圖表數(shù)據(jù)繪制的區(qū)域但不包括標(biāo)題，圖例和軸名稱被渲染的區(qū)域。
如下圖所示的藍(lán)色區(qū)域就是圖表的畫布區(qū)域：
本篇教程將從四個(gè)方面教你自定義圖表的畫布：
1.修改畫布的填充顏色
圖表的畫布顏色填充修飾效果如下圖所示：
修改畫布填充顏色用到的屬性有：
| 屬性名稱 |
描述 |
| canvasBgColor |
設(shè)置畫布的背景顏色。 |
| canvasBgAlpha |
設(shè)置畫布背景的透明度。 |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"canvasbgColor": "#1790e1",
"canvasbgAlpha": "10",
"canvasBorderThickness": "1",
"showAlternateHGridColor": "0",
"bgColor": "#eeeeee",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" placevaluesinside="1" rotatevalues="1" valuefontcolor="#ffffff" canvasbgcolor="#1790e1" canvasbgalpha="10" canvasborderthickness="1" showalternatehgridcolor="0" bgcolor="#eeeeee" theme="fint">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
2.自定義畫布邊框
默認(rèn)情況下，2D圖表的渲染帶有畫布邊框。FusionChsrts允許你自定義畫布邊框的顏色、厚度以及透明度。帶有畫布邊框修飾的圖表如下圖所示：
下表是用于自定義圖表畫布邊框所需的屬性：
| 屬性名稱 |
描述 |
| showCanvasBorder |
設(shè)置為1時(shí)顯示畫布邊框；設(shè)置為0時(shí)隱藏畫布邊框。 |
| canvasBorderColor |
用于指定畫布邊框的顏色。 |
| canvasBorderThickness |
用于指定畫布邊框的厚度。 |
| canvasBorderAlpha |
用于指定畫布邊框的透明度。 |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showCanvasBorder": "1",
"canvasBorderColor": "#666666",
"canvasBorderThickness": "4",
"canvasBorderAlpha": "80",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" showcanvasborder="1" canvasbordercolor="#666666" canvasborderthickness="4" canvasborderalpha="80" theme="fint">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
3.使用漸變填充畫布
下圖是帶有漸變填充效果的圖表畫布：
下表是用于自定義圖表畫布漸變填充所需的屬性：
| 屬性名稱 |
描述 |
| canvasBgColor |
設(shè)置畫布的背景顏色。 |
| canvasBgAlpha |
設(shè)置畫布背景的透明度。 |
| canvasBgRatio |
用于指定畫布背景在各個(gè)漸變的比例并以逗號(hào)分隔。 |
| canvasBgAngle |
用于指定畫布背景漸變的角度。 |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"theme": "fint",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"bgColor": "#eeeeee,#cccccc",
"canvasbgColor": "#eeeeee,#b3b3b3",
"canvasbgAlpha": "100",
"canvasBgRatio": "40,60",
"canvasBgAngle": "0"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" theme="fint" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" placevaluesinside="1" rotatevalues="1" bgcolor="#eeeeee,#cccccc" canvasbgcolor="#eeeeee,#b3b3b3" canvasbgalpha="100" canvasbgratio="40,60" canvasbgangle="0">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
4.配置3D畫布
在FusionCharts圖表中的畫布可以配置成3D效果，如下圖所示。
自定義3D畫布所需的屬性如下表所示：
| 屬性名稱 |
描述 |
| canvasBaseColor |
用于指定畫布的基座顏色。 |
| showCanvasBg |
設(shè)置為1（默認(rèn)）時(shí)顯示畫布背景；設(shè)置為0時(shí)隱藏畫布背景。 |
| showCanvasBase |
設(shè)置為1（默認(rèn)）時(shí)顯示畫布基座；設(shè)置為0時(shí)隱藏畫布基座。 |
| canvasBaseDepth |
用于設(shè)置畫布基座的高度。 |
| canvasBgDepth |
用于指定畫布背景的深度。 |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"showCanvasBg": "1",
"showCanvasBase": "1",
"canvasBaseDepth": "14",
"canvasBgDepth": "5",
"canvasBaseColor": "#aaaaaa",
"canvasBgColor": "#eeeeee"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" theme="fint" numberprefix="$" placevaluesinside="1" rotatevalues="1" showcanvasbg="1" showcanvasbase="1" canvasbasedepth="14" canvasbgdepth="5" canvasbasecolor="#aaaaaa" canvasbgcolor="#eeeeee">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
購(gòu)買最新正版授權(quán)！""
慧都年終盛典火爆開啟，一年僅一次的最強(qiáng)促銷，破冰鉅惠不容錯(cuò)過！！優(yōu)惠詳情點(diǎn)擊查看>>
標(biāo)簽：
JavaScript 圖表圖表庫(kù)數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營(yíng) 
4次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線