JavaScript图表工具FusionCharts Suite XT入门教程（七）：使用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设置数据源

使用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: '//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: '//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”微信公众号，及时获取产品最新消息和最新资讯