JavaScript图表工具FusionCharts Suite XT入门教程（七）：使用URL设置数据源

本文将为您介绍FusionCharts中使用URL设置数据源。

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来制作专业的JavaScript图表。

FusionCharts Suite XT现已更新至3.14.0-sr.1版本，FusionCharts Angular包装器现在与Angular 8兼容并修复了一些bug。

FusionCharts Suite XT最新试用版

使用URL设置数据源

FusionCharts可让您将完整的JSON / XML图表数据作为静态字符串传递给dataSource属性。或者，您也可以将图表数据保存到.json或.xml文件中，然后将该文件的相对URL作为值传递给dataSource属性。

两种方法之间的唯一区别是传递给dataFormat属性的值。对于第一种方法，该dataFormat属性采用json或xml作为值，具体取决于图表数据。对于第二种方法，值将为jsonurl和xmlurl。

本文介绍了如何使用相应文件的URL设置图表数据。

使用JSON作为URL加载数据

让我们使用第一个示例使用JSON 构建相同的收入图表，并使用.json文件作为数据源。

下表中显示了该图表的数据：

上表的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"    }]}

将此文件复制到文件中，命名为oilReserves.json，然后将其存储在与HTML页面相同的文件夹中。

如果在JSON中使用多语言字符，请确保使用UTF-8编码保存JSON数据。

给出以上图表的代码如下：

// 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();

上图通过以下步骤呈现：

1、使用包含必需的库和组件import。例如fusioncharts图书馆等

2、将图表配置存储在JSON对象中。在JSON对象中：

• 图表类型已设置为column2d。

• 图表的宽度和高度已设置为像素。

3、要使用URL设置数据源：

• dataFormat已设置为jsonurl。

• 静态URL已设置dataSource为呈现以上图表。

4、为图表添加一个容器（实例）。

在本地显示图表（没有Web服务器，即使在本地主机上也没有）时，您将无法从硬盘上存在的XML或JSON文件中加载数据。这是由于大多数现代浏览器实施的安全限制。

使用XML作为URL加载数据

上图的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>

将此文件复制到一个名为的文件中oilReserves.xml，并将其存储在与HTML页面相同的文件夹中。

如果在XML中使用多语言字符，请确保使用UTF-8编码保存XML数据。

给出以上图表的代码如下：

// 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();

上图通过以下步骤呈现：

1、使用包含必需的库和组件import。例如fusioncharts图书馆等

2、将图表配置存储在XML对象中。在XML对象中：

• 图表类型已设置为column2d。

• 图表的宽度和高度已设置为像素。

3、要使用URL设置数据源：

• dataFormat已设置为jsonurl。

• 静态URL已设置dataSource为呈现以上图表。

4、为图表添加一个容器（实例）。

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

想要了解或购买FusionCharts Suite XT正版授权的朋友欢迎咨询官方在线客服

关注“慧聚IT”微信公众号，及时获取产品最新消息和最新资讯

标签：

来源：慧都