FusionCharts中文教程：自定义图表——锚点
【FusionCharts】目前已更新至v3.10.0版本>>点击了解FusionCharts v3.10.0更新详情数据结构
自定义锚点显示
图表的锚点和提示工具一般状况下是按默认效果显示的。隐藏锚点的折线图显示以下：ide
下表是用来显示锚点所需的属性：工具
drawAnchors-设置为1时显示锚点；设置为0时隐藏锚点。url
上图所示图表隐藏锚点的数据结构以下：spa
JSON:code
{
"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>
自定义锚点属性
自定义锚点属性的折线图效果以下：图片
下表是自定义锚点外观所需的属性：ip
anchorSides-用于指定锚点显示的边数，取决于你想显示什么形状的锚点，取值从3到20。get
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": "http://static.fusioncharts.com/sampledata/userimages/1.png"
},
{
"label": "August",
"value": "6.9",
"displayValue": "Mac, 6.9",
"tooltext": "August : Mac, 6.9",
"anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/2.png"
},
{
"label": "September",
"value": "8",
"displayValue": "Phillips, 8",
"tooltext": "September : Phillips, 8",
"anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/3.png"
},
{
"label": "October",
"value": "7.5",
"displayValue": "Terrin, 7.5",
"tooltext": "October : Terrin, 7.5",
"anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/4.png"
},
{
"label": "November",
"value": "7.7",
"displayValue": "Tom, 7.7",
"tooltext": "November : Tom, 7.7",
"anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/5.png"
},
{
"label": "December",
"value": "6.7",
"displayValue": "Martha, 6.7",
"tooltext": "December : Martha, 6.7",
"anchorImageUrl": "http://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="http://static.fusioncharts.com/sampledata/userimages/1.png" />
< set label="August" value="6.9" displayvalue="Mac, 6.9" tooltext="August : Mac, 6.9" anchorimageurl="http://static.fusioncharts.com/sampledata/userimages/2.png" />
< set label="September" value="8" displayvalue="Phillips, 8" tooltext="September : Phillips, 8" anchorimageurl="http://static.fusioncharts.com/sampledata/userimages/3.png" />
< set label="October" value="7.5" displayvalue="Terrin, 7.5" tooltext="October : Terrin, 7.5" anchorimageurl="http://static.fusioncharts.com/sampledata/userimages/4.png" />
< set label="November" value="7.7" displayvalue="Tom, 7.7" tooltext="November : Tom, 7.7" anchorimageurl="http://static.fusioncharts.com/sampledata/userimages/5.png" />
< set label="December" value="6.7" displayvalue="Martha, 6.7" tooltext="December : Martha, 6.7" anchorimageurl="http://static.fusioncharts.com/sampledata/userimages/6.png" />
</chart>
相关文章
- 1. iOS MapAnchor(地图锚点~自定义)~demo
- 2. FusionCharts自定义图表导出菜单或界面
- 3. Myeclipse中文教程：自定义myeclipse
- 4. Flash图表FusionCharts如何自定义图表导出菜单或界面
- 5. Flash图表控件FusionCharts如何自定义图表的工具提示
- 6. Flash图表控件FusionCharts如何自定义图表上的垂直线
- 7. Flash图表控件FusionCharts自定义图表y轴最大/最小值
- 8. FusionCharts使用教程：使用FusionCharts ASP Class创建图表
- 9. FusionCharts使用教程：在PHP程序中创建JavaScript图表
- 10. Mindfusion教程：带有剪切图像的自定义图表节点（上）
- 更多相关文章...
- • 自定义TypeHandler - MyBatis教程
- • R 绘图 - 中文支持 - R 语言教程
- • RxJava操作符（十）自定义操作符
- • SpringBoot中properties文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. iOS MapAnchor(地图锚点~自定义)~demo
- 2. FusionCharts自定义图表导出菜单或界面
- 3. Myeclipse中文教程：自定义myeclipse
- 4. Flash图表FusionCharts如何自定义图表导出菜单或界面
- 5. Flash图表控件FusionCharts如何自定义图表的工具提示
- 6. Flash图表控件FusionCharts如何自定义图表上的垂直线
- 7. Flash图表控件FusionCharts自定义图表y轴最大/最小值
- 8. FusionCharts使用教程：使用FusionCharts ASP Class创建图表
- 9. FusionCharts使用教程：在PHP程序中创建JavaScript图表
- 10. Mindfusion教程：带有剪切图像的自定义图表节点（上）