半岛外围网上直营

FusionCharts使用教程：自定义图表——锚点

原创|使用教程|编辑：郑恭琳|2016-01-19 10:39:57.000|阅读 1742 次

概述：折线图、曲线图、面积图中的每个数据点都以锚点的形式呈现。锚有助于更好地在图表中识别数据点。同样，当鼠标悬停在某个数据点时还会显示数据图详细信息的工具提示，并且还可以链接到其它网页。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

FusionCharts目前已更新至v3.10.0版本>>点击了解FusionCharts v3.10.0更新详情

< FusionChart最新版本下载>

自定义锚点显示

图表的锚点和提示工具通常情况下是按默认效果显示的。隐藏锚点的折线图显示如下：

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>

自定义锚点属性

自定义锚点属性的折线图效果如下：

fusionchart

下表是自定义锚点外观所需的属性：

属性名称 描述
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允许用户通过自定义具体的锚点以突出显示特定的数据点。要突出显示特定的锚点，你只需要自定义锚点的外观。如下图所示：

fusionchart

使用数据对象的锚点自定义属性来对具体的数据点锚点进行配置。上图所示自定义指定数据点锚点使用的数据结构如下：

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>

在折线图和曲线图的锚点添加图片

折线图和面积图的锚点现在支持外部图像，允许你为每一个锚点使用不同的图像，突出显示某些特殊值。折线图锚点带有外部图像的效果图如下：

fusionchart

下表是用于配制锚点外部图像所需的属性：

属性名称 描述
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>

购买最新正版授权！详情请""

迎春纳福，金猴献瑞，革新之年双节同庆，惠享不停惊喜连连！优惠详情点击查看>>


标签：JavaScript 图表图表库数据可视化图表解决方案图表控件FusionCharts图表

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP
利记足球官网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 真人boyu·博鱼滚球网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 最大网上PM娱乐城盘口(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 正规雷火竞技官方买球(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 雷火竞技权威十大网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) boyu·博鱼信誉足球官网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 权威188BET足球网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 正规188BET足球大全(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新)