控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

FusionCharts XT使用JSON作为数据源创建图表

作者:ComponentCN 出处:ComponentCN 2014年05月28日 阅读:

FusionCharts XT使用JSON作为数据源创建图表
FusionCharts XT是一款功能强大的跨平台和跨浏览器的Flash以及Html5图表控件,可以使用XML或者JSON作为数据源载体,通过简单的操作即可创建出绚丽的图表,下面我们简单介绍下如何使用Json作为数据源创建图表:

1. 首先我们创建一个weekly-sales.html页面,然后输入下面代码:
<html>
  <head>       
    <title>My First chart using FusionCharts XT - JSON data URL</title>        
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>  
  <body>    
    <div id="chartContainer">FusionCharts XT will load here!</div>         
    <script type="text/javascript"><!--        

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
                   "myChartId", "400", "300", "0" );
      myChart.setJSONUrl("Data.json");
      myChart.render("chartContainer");
     
    // -->    
    </script>     
  </body>
</html>

注意:由于很多IIS服务器默认下没有应用.json文件,您需要打开IIS服务器把该文件类型添加到里面,打开IIS属性管理找到MIME类型,点击新建,在扩展栏输入JSON,MIME类型为"application/json" ,点击确认就可以了。

2. 创建Data.json文件,并设置JSON数据如下:

{
    "chart": {
          "caption" : "Weekly Sales Summary" ,
          "xAxisName" : "Week",
          "yAxisName" : "Sales",
          "numberPrefix" : "$"
    },
       
    "data" :
     [
          { "label" : "Week 1", "value" : "14400" },
          { "label" : "Week 2", "value" : "19600" },
          { "label" : "Week 3", "value" : "24000" },
          { "label" : "Week 4", "value" : "15700" }
     ]
}

通过这样简单的操作,运行程序,图表就显示出来了。

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统