Fusion Charts setCurrentRenderer('javascript') 问题答案

【问题标题】：Fusion Charts setCurrentRenderer('javascript') issueFusion Charts setCurrentRenderer('javascript') 问题
【发布时间】：2012-04-20 02:37:56
【问题描述】：

我有以下 HTML 代码。它正在工作。

<html>
  <head>     
    <title>My First chart using FusionCharts - Using pure JavaScript</title>    

    <script type="text/javascript" src="http://www.fusioncharts.com/lib/jquery/jquery-1.6.2.min.js"></script>
    <script language="JavaScript" src="http://www.fusioncharts.com/lib/js/FusionCharts.js"></script>
    <script language="JavaScript" src="http://www.fusioncharts.com/lib/js/FusionCharts.HC.js"></script>
    <script language="JavaScript" src="http://www.fusioncharts.com/lib/js/FusionCharts.HC.Charts.js"></script>
    <script language="JavaScript" src="http://www.fusioncharts.com/lib/js/jquery.min.js"></script>

  </head>
  <body>     
    <div id="chartContainer">FusionCharts will load here!</div>          
    <script type="text/javascript">

    //FusionCharts.setCurrentRenderer('javascript');
           var chartObj = new FusionCharts({
           swfUrl: "http://www.fusioncharts.com/demos/gallery/Charts/Column2D.swf",
           width: "500", 
           height: "300",
           id: 'sampleChart',
           dataSource: "http://www.fusioncharts.com/demos/gallery/Data/Col2D1.xml",
           dataFormat: FusionChartsDataFormats.XMLURL,           
           renderAt: 'chartContainer'
        }).render();

    </script>        
  </body> 
</html>

当我使用setCurrentRenderer javascripde 模式时。它给了我“没有数据可显示”。

编辑：示例源 - http://www.fusioncharts.com/demos/gallery/column-and-bar/chart.asp?id=column2d_1

【问题讨论】：

你为什么要导入 jQuery 两次？？
我已经从他们的网站上复制了这个例子。我删除了一些包含，因为我没有使用它们。这已经离开了，但如果你删除它，它会给你同样的结果——在没有 javascript 模式的情况下工作，而不是在使用它。

标签： javascript fusioncharts

【解决方案1】：

从 FusionCharts 网站以 JavaScript 加载数据会导致跨域错误。它是浏览器本身内置的安全性。

XMLHttpRequest cannot load http://www.fusioncharts.com/demos/gallery/Data/Col2D1.xml. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

尝试在您自己的本地服务器上托管 JavaScript 文件、Flash 文件和 XML 数据，它应该可以完美运行。

【讨论】：

我已经修复了在我的 java 脚本代码中加载“硬编码”XML 数据的问题。

【解决方案2】：

我在下面的例子中使用了 javascript 渲染：

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Multi Series Bar 2D Chart</title>
    <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../assets/prettify/prettify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../Charts/jquery.min.js"></script>
    <script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
    <script type="text/javascript" src="../assets/prettify/prettify.js"></script>
    <script type="text/javascript" src="../assets/ui/js/json2.js"></script>
    <script type="text/javascript" src="../assets/ui/js/lib.js" ></script>
    <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>                        
    <script>
      /* select the element name, css selector, background etc */
      DD_belatedPNG.fix('img');

      /* string argument can be any CSS selector */
    </script>
      <p>&nbsp;</p>
      <P align="center"></P>
    <![endif]-->
</head>   
 <body>
<h3 class="chart-title">Multi Series Bar 2D Chart</h3>
<p>&nbsp;</p>
<script type="text/javascript" src="../Data/String/js/MSBar3D1.js" ></script>

    <div id="chartdiv" align="center">Chart will load here</div>
    <script type="text/javascript">
        alert(GALLERY_RENDERER);
        FusionCharts.setCurrentRenderer("javascript");
       var chart = new FusionCharts("MSBar3D.swf", "ChartId", "560", "400", "0", "0");
       chart.setXMLData( dataString );         
       chart.render("chartdiv");
    </script>
      <p>&nbsp;</p>
      <p align="center">3D Bar chart showing sales comparison of 5 countries across 3 years. Click on a legend item to show/hide the data series.</p>

它适用于 java 脚本渲染..我希望这个例子有帮助

【讨论】：

【解决方案3】：

跨域问题可以通过实现CORS——跨源资源共享来解决。确保提供数据的服务器在响应中发送一些额外的 http-headers：

Access-Control-Allow-Origin: http://the_url_that_hosts_the_page

Access-Control-Allow-Headers: If-Modified-Since

【讨论】：