JavaScript图表工具FusionCharts Suite XT入门教程(七):使用URL设置数据源

翻译|使用教程|编辑:吴园园|2019-10-18 15:03:18.270|阅读 24 次

概述:本文将为您介绍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文件作为数据源。

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

国家

石油储备量

委内瑞拉

290

沙特

260

加拿大

180

伊朗

140

俄国

115

阿联酋

100

美国

30

中国

30

上表的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”微信公众号,及时获取产品最新消息和最新资讯

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/setting-data-source-using-url

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat