FusionCharts中文教程：自定義圖表——錨點

時間  2019-12-12
標籤 fusioncharts 中文 教程 自定義 圖表 简体版
原文   原文鏈接

【FusionCharts】目前已更新至v3.10.0版本>>點擊瞭解FusionCharts v3.10.0更新詳情數據結構

自定義錨點顯示

圖表的錨點和提示工具一般狀況下是按默認效果顯示的。隱藏錨點的折線圖顯示以下：ide

fusionchart

下表是用來顯示錨點所需的屬性：工具

  • 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>

自定義錨點屬性

自定義錨點屬性的折線圖效果以下：圖片

fusionchart

下表是自定義錨點外觀所需的屬性：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容許用戶經過自定義具體的錨點以突出顯示特定的數據點。要突出顯示特定的錨點，你只須要自定義錨點的外觀。以下圖所示：

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": "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>

FusionChart最新版本下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程