JavaScript圖表工具FusionCharts Suite XT入門教程（五）：添加注釋

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

FusionCharts Suite XT現(xiàn)已更新至3.14.0-sr.1版本，F(xiàn)usionCharts Angular包裝器現(xiàn)在與Angular 8兼容并修復(fù)了一些bug。

點(diǎn)擊下載FusionCharts Suite XT最新試用版

添加注釋

上面示例的完整代碼如下：

import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
    type: 'spline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Monthly Temperature in Texas",
            "yAxisName": "Average Monthly Temperature",
            "anchorradius": "5",
            "plotToolText": "Average temperature in $label is $dataValue",
            "showHoverEffect": "1",
            "showvalues": "0",
            "numberSuffix": "°C",
            "theme": "fusion",
            "anchorBgColor": "#72D7B2",
            "paletteColors": "#72D7B2"
        },
        "annotations": {
            "groups": [{
                "id": "anchor-highlight",
                "items": [{
                    "id": "high-star",
                    "type": "circle",
                    "x": "$dataset.0.set.7.x",
                    "y": "$dataset.0.set.7.y",
                    "radius": "12",
                    "color": "#cc0000",
                    "border": "2",
                    "borderColor": "#0075c2"
                }, {
                    "id": "label",
                    "type": "text",
                    "text": "Hottest Month",
                    "fillcolor": "#0075c2",
                    "rotate": "90",
                    "x": "$dataset.0.set.7.x+75",
                    "y": "$dataset.0.set.7.y-2"
                }]
            }]
        },
        "data": [{
            "label": "Jan",
            "value": "1"
        }, {
            "label": "Feb",
            "value": "5"
        }, {
            "label": "Mar",
            "value": "10"
        }, {
            "label": "Apr",
            "value": "12"
        }, {
            "label": "May",
            "value": "14"
        }, {
            "label": "Jun",
            "value": "16"
        }, {
            "label": "Jul",
            "value": "20"
        }, {
            "label": "Aug",
            "value": "22"
        }, {
            "label": "Sep",
            "value": "20"
        }, {
            "label": "Oct",
            "value": "16"
        }, {
            "label": "Nov",
            "value": "7"
        }, {
            "label": "Dec",
            "value": "2"
        }]
    }});// RenderchartInstance.render();

上圖通過以下步驟呈現(xiàn)：

1. 使用包括必要的庫和組件import。例如fusioncharts圖書館等

2. 將圖表和主題添加為依賴項(xiàng)。

3. 使用圖表選項(xiàng)創(chuàng)建圖表的實(shí)例。在JSON對(duì)象中：

          將圖表類型設(shè)置為column2d。

          設(shè)置圖表的寬度和高度（以像素為單位）。

          將設(shè)置dataFormat為JSON。

          將json數(shù)據(jù)嵌入為的值dataSource。

          在中創(chuàng)建一個(gè)annotations對(duì)象dataSource，以指定注釋的外觀和功能。

=====================================================

想要了解或購買FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢慧都官方在線客服

關(guān)注“慧聚IT”微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新消息和最新資訊