JavaScript圖表工具FusionCharts Suite XT入門教程（七）：使用URL設(shè)置數(shù)據(jù)源

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器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。

點擊下載FusionCharts Suite XT最新試用版

使用URL設(shè)置數(shù)據(jù)源

使用JSON作為URL加載數(shù)據(jù)

讓我們使用第一個示例使用JSON 構(gòu)建相同的收入圖表，并使用.json文件作為數(shù)據(jù)源。

下表中顯示了該圖表的數(shù)據(jù)：

上表的JSON表示如下所示：

{
    // Chart Configuration
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
    },
    // Chart Data
    "data": [{
        "label": "Venezuela",
        "value": "290"
    }, {
        "label": "Saudi",
        "value": "260"
    }, {
        "label": "Canada",
        "value": "180"
    }, {
        "label": "Iran",
        "value": "140"
    }, {
        "label": "Russia",
        "value": "115"
    }, {
        "label": "UAE",
        "value": "100"
    }, {
        "label": "US",
        "value": "30"
    }, {
        "label": "China",
        "value": "30"
    }]}

將此文件復(fù)制到文件中，命名為oilReserves.json，然后將其存儲在與HTML頁面相同的文件夾中。

如果在JSON中使用多語言字符，請確保使用UTF-8編碼保存JSON數(shù)據(jù)。

給出以上圖表的代碼如下：

// Include the core fusioncharts file from core  -import FusionCharts from 'fusioncharts/core';// Include the chart from viz folder// E.g. - import ChartType from fusioncharts/viz/[ChartType]import Column2D from 'fusioncharts/viz/column2d';// Include the fusion theme/import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'// Add the chart and theme as dependency// E.g. FusionCharts.addDep(ChartType)FusionCharts.addDep(Column2D);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
    type: 'Column2D',
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'jsonurl',
    dataSource: 'https://static.fusioncharts.com/sample/oilReserves.json'});// RenderchartInstance.render();

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

1、使用包含必需的庫和組件import。例如fusioncharts圖書館等

2、將圖表配置存儲在JSON對象中。在JSON對象中：

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

• 圖表的寬度和高度已設(shè)置為像素。

3、要使用URL設(shè)置數(shù)據(jù)源：

• dataFormat已設(shè)置為jsonurl。
  

• 靜態(tài)URL已設(shè)置dataSource為呈現(xiàn)以上圖表。

4、為圖表添加一個容器（實例）。

在本地顯示圖表（沒有Web服務(wù)器，即使在本地主機上也沒有）時，您將無法從硬盤上存在的XML或JSON文件中加載數(shù)據(jù)。這是由于大多數(shù)現(xiàn)代瀏覽器實施的安全限制。

使用XML作為URL加載數(shù)據(jù)

上圖的XML表示如下所示：

<chart caption='Countries With Most Oil Reserves [2017-18] ' subcaption='In MMbbl = One Million barrels ' xaxisname='Country ' yaxisname='Reserves (MMbbl) ' numberprefix='K ' theme='fusion '>
    <set label='Venezuela ' value='290 ' />
    <set label='Saudi ' value='260 ' />
    <set label='Canada ' value='180 ' />
    <set label='Iran ' value='140 ' />
    <set label='Russia ' value='115 ' />
    <set label='UAE ' value='100 ' />
    <set label='US ' value='30 ' />
    <set label='China ' value='30 ' /></chart>

將此文件復(fù)制到一個名為的文件中oilReserves.xml，并將其存儲在與HTML頁面相同的文件夾中。

如果在XML中使用多語言字符，請確保使用UTF-8編碼保存XML數(shù)據(jù)。

給出以上圖表的代碼如下：

// Include the core fusioncharts file from core  -import FusionCharts from 'fusioncharts/core';// Include the chart from viz folder// E.g. - import ChartType from fusioncharts/viz/[ChartType]import Column2D from 'fusioncharts/viz/column2d';// Include the fusion theme/import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'// Add the chart and theme as dependency// E.g. FusionCharts.addDep(ChartType)FusionCharts.addDep(Column2D);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
    type: 'Column2D',
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'xmlurl',
    dataSource: 'https://static.fusioncharts.com/sample/oilReserves.xml'});// RenderchartInstance.render();

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

1、使用包含必需的庫和組件import。例如fusioncharts圖書館等

2、將圖表配置存儲在XML對象中。在XML對象中：

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

• 圖表的寬度和高度已設(shè)置為像素。

3、要使用URL設(shè)置數(shù)據(jù)源：

• dataFormat已設(shè)置為jsonurl。
  

• 靜態(tài)URL已設(shè)置dataSource為呈現(xiàn)以上圖表。

4、為圖表添加一個容器（實例）。

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

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

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