FusionCharts目前已更新至v3.10.0版本>>點擊了解FusionCharts v3.10.0更新詳情
< FusionChart最新版本下載>
自定義錨點顯示
圖表的錨點和提示工具通常情況下是按默認效果顯示的。隱藏錨點的折線圖顯示如下：
下表是用來顯示錨點所需的屬性：
| 屬性名稱 |
描述 |
| drawAnchors |
設置為1時顯示錨點；設置為0時隱藏錨點。 |
上圖所示圖表隱藏錨點的數據結構如下：
JSON:
{
"chart": {
"caption": "Customer Satisfaction Averages",
"subcaption": "Last week",
"xaxisname": "Day",
"yaxisname": "Satisfaction (In %)",
"numbersuffix": "%",
"showvalues": "0",
"drawAnchors": "1",
"theme": "fint"
},
"data": [
{
"label": "Mon",
"value": "22.5"
},
{
"label": "Tue",
"value": "42.4"
},
{
"label": "Wed",
"value": "28.2"
},
{
"label": "Thu",
"value": "22.8"
},
{
"label": "Fri",
"value": "39.2"
},
{
"label": "Sat",
"value": "66.45"
}
]
}
XML:
<chart caption="Customer Satisfaction Averages" subcaption="Last week" xaxisname="Day" yaxisname="Satisfaction (In %)" numbersuffix="%" showvalues="0" drawanchors="1" theme="fint">
< set label="Mon" value="22.5" />
< set label="Tue" value="42.4" />
< set label="Wed" value="28.2" />
< set label="Thu" value="22.8" />
< set label="Fri" value="39.2" />
< set label="Sat" value="66.45" />
</chart>
自定義錨點屬性
自定義錨點屬性的折線圖效果如下：
下表是自定義錨點外觀所需的屬性：
| 屬性名稱 |
描述 |
| anchorSides |
用于指定錨點顯示的邊數，取決于你想顯示什么形狀的錨點，取值從3到20。 |
| anchorRadius |
用于指定錨點的直徑。 |
| anchorBorderColor |
用于指定錨點邊框顯示的顏色，用十六進制代碼。 |
| anchorBorderThickness |
用于指定錨點邊框的厚度。 |
| anchorBgColor |
用于指定錨點的背景顏色，用十六進制代碼。 |
| anchorBgAlpha |
用于設置錨點背景的透明度，取值從0到100。 |
上圖所示自定義錨點的圖表數據結構如下：
JSON:
{
"chart": {
"caption": "Customer Satisfaction Averages",
"subcaption": "Last week",
"xaxisname": "Day",
"yaxisname": "Satisfaction (In %)",
"numbersuffix": "%",
"showvalues": "0",
"anchorRadius": "6",
"anchorBorderThickness": "2",
"anchorBorderColor": "#127fcb",
"anchorSides": "3",
"anchorBgColor": "#d3f7ff",
"theme": "fint"
},
"data": [
{
"label": "Mon",
"value": "22.5"
},
{
"label": "Tue",
"value": "42.4"
},
{
"label": "Wed",
"value": "28.2"
},
{
"label": "Thu",
"value": "22.8"
},
{
"label": "Fri",
"value": "39.2"
},
{
"label": "Sat",
"value": "66.45"
}
]
}
XML:
<chart caption="Customer Satisfaction Averages" subcaption="Last week" xaxisname="Day" yaxisname="Satisfaction (In %)" numbersuffix="%" showvalues="0" anchorradius="6" anchorborderthickness="2" anchorbordercolor="#127fcb" anchorsides="3" anchorbgcolor="#d3f7ff" theme="fint">
< set label="Mon" value="22.5" />
< set label="Tue" value="42.4" />
< set label="Wed" value="28.2" />
< set label="Thu" value="22.8" />
< set label="Fri" value="39.2" />
< set label="Sat" value="66.45" />
</chart>
自定義指定數據點的錨點
FusionCharts允許用戶通過自定義具體的錨點以突出顯示特定的數據點。要突出顯示特定的錨點，你只需要自定義錨點的外觀。如下圖所示：
使用數據對象的錨點自定義屬性來對具體的數據點錨點進行配置。上圖所示自定義指定數據點錨點使用的數據結構如下：
JSON:
{
"chart": {
"caption": "Customer Satisfaction Averages",
"subcaption": "Last week",
"xaxisname": "Day",
"yaxisname": "Satisfaction (In %)",
"numbersuffix": "%",
"showvalues": "0",
"anchorRadius": "6",
"anchorBorderThickness": "2",
"theme": "fint"
},
"data": [
{
"label": "Mon",
"value": "22.5",
"anchorBorderColor": "#cc3333",
"anchorBgColor": "#ff9900"
},
{
"label": "Tue",
"value": "42.4",
"anchorBorderColor": "#33cc00",
"anchorBgColor": "#66FF33"
},
{
"label": "Wed",
"value": "28.2",
"anchorBorderColor": "#cc3333",
"anchorBgColor": "#ff9900"
},
{
"label": "Thu",
"value": "22.8",
"anchorBorderColor": "#cc3333",
"anchorBgColor": "#ff9900"
},
{
"label": "Fri",
"value": "39.2",
"anchorBorderColor": "#33cc00",
"anchorBgColor": "#66FF33"
},
{
"label": "Sat",
"value": "66.45",
"anchorBorderColor": "#33cc00",
"anchorBgColor": "#66FF33"
}
]
}
XML:
<chart caption="Customer Satisfaction Averages" subcaption="Last week" xaxisname="Day" yaxisname="Satisfaction (In %)" numbersuffix="%" showvalues="0" anchorradius="6" anchorborderthickness="2" theme="fint">
< set label="Mon" value="22.5" anchorbordercolor="#cc3333" anchorbgcolor="#ff9900" />
< set label="Tue" value="42.4" anchorbordercolor="#33cc00" anchorbgcolor="#66FF33" />
< set label="Wed" value="28.2" anchorbordercolor="#cc3333" anchorbgcolor="#ff9900" />
< set label="Thu" value="22.8" anchorbordercolor="#cc3333" anchorbgcolor="#ff9900" />
< set label="Fri" value="39.2" anchorbordercolor="#33cc00" anchorbgcolor="#66FF33" />
< set label="Sat" value="66.45" anchorbordercolor="#33cc00" anchorbgcolor="#66FF33" />
</chart>
在折線圖和曲線圖的錨點添加圖片
折線圖和面積圖的錨點現在支持外部圖像，允許你為每一個錨點使用不同的圖像，突出顯示某些特殊值。折線圖錨點帶有外部圖像的效果圖如下：
下表是用于配制錨點外部圖像所需的屬性：
| 屬性名稱 |
描述 |
| anchorImageUrl |
用于指定錨點所需圖像的URL。 |
| anchorImageAlpha |
用于指定錨點圖像的透明度，取值從0到100。 |
| anchorImageScale |
用于指定外部圖像的加載比例。 |
| anchorImageHoverScale |
用于指定當鼠標懸停在錨點上，外部圖像的加載比例。 |
| anchorImageHoverAlpha |
用于指定當鼠標懸停在錨點上，錨點圖像的透明度，取值從0到100。 |
上圖所示錨點添加外部圖像用到的的數據結構如下：
JSON:
{
"chart": {
"caption": "Top Employees",
"subcaption": "Last six months",
"xAxisName": "Month",
"yAxisName": "Rating",
"yaxisminvalue": "0",
"yaxismaxvalue": "10",
"yAxisValuesPadding": "15",
"valuePosition": "below",
"numDivlines": "5",
"lineAlpha": "1",
"anchorAlpha": "100",
"theme": "fint"
},
"data": [
{
"label": "July",
"value": "7.8",
"displayValue": "John, 7.8",
"tooltext": "July : John, 7.8",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/1.png"
},
{
"label": "August",
"value": "6.9",
"displayValue": "Mac, 6.9",
"tooltext": "August : Mac, 6.9",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/2.png"
},
{
"label": "September",
"value": "8",
"displayValue": "Phillips, 8",
"tooltext": "September : Phillips, 8",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/3.png"
},
{
"label": "October",
"value": "7.5",
"displayValue": "Terrin, 7.5",
"tooltext": "October : Terrin, 7.5",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/4.png"
},
{
"label": "November",
"value": "7.7",
"displayValue": "Tom, 7.7",
"tooltext": "November : Tom, 7.7",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/5.png"
},
{
"label": "December",
"value": "6.7",
"displayValue": "Martha, 6.7",
"tooltext": "December : Martha, 6.7",
"anchorImageUrl": "//static.fusioncharts.com/sampledata/userimages/6.png"
}
]
}
XML:
<chart caption="Top Employees" subcaption="Last six months" xaxisname="Month" yaxisname="Rating" yaxisminvalue="0" yaxismaxvalue="10" yaxisvaluespadding="15" valueposition="below" numdivlines="5" linealpha="1" anchoralpha="100" theme="fint">
< set label="July" value="7.8" displayvalue="John, 7.8" tooltext="July : John, 7.8" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/1.png" />
< set label="August" value="6.9" displayvalue="Mac, 6.9" tooltext="August : Mac, 6.9" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/2.png" />
< set label="September" value="8" displayvalue="Phillips, 8" tooltext="September : Phillips, 8" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/3.png" />
< set label="October" value="7.5" displayvalue="Terrin, 7.5" tooltext="October : Terrin, 7.5" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/4.png" />
< set label="November" value="7.7" displayvalue="Tom, 7.7" tooltext="November : Tom, 7.7" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/5.png" />
< set label="December" value="6.7" displayvalue="Martha, 6.7" tooltext="December : Martha, 6.7" anchorimageurl="//static.fusioncharts.com/sampledata/userimages/6.png" />
</chart>
購買最新正版授權！詳情請""
迎春納福，金猴獻瑞，革新之年雙節(jié)同慶，惠享不停驚喜連連！優(yōu)惠詳情點擊查看>>
標簽：
JavaScript 圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
19次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線