2012-04-06 4 views
3

次のHTMLコードがあります。それは働いている。フュージョンチャートsetCurrentRenderer( 'javascript')の問題

<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モードを使用します。それは私に "表示するデータなし"を与える。

EDIT:例のソース - クロスドメイン・エラーでFusionChartsのウェブサイトの結果からJavaScriptでhttp://www.fusioncharts.com/demos/gallery/column-and-bar/chart.asp?id=column2d_1

+1

は、なぜあなたは**二回**のjQueryをインポートしています? – Pointy

+0

私は自分のサイトからこの例をコピーしました。私はそれらを使用していないので、いくつかのインクルードを削除しています。これは残っていますが、削除しても同じ結果が得られます.JavaScriptモードを使用せずに動作しています。 – gotqn

答えて

4

データをロードします。ブラウザ自体でセキュリティが組み込まれています。

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データをホスティングしてみて、それが完璧に動作するはずです。

+0

私は自分のJavaスクリプトコードでXMLデータを「ハードコード」しているこの修正を修正しました。 – gotqn

0

私は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> 


、それはこの例では、

0

クロスを役に立てば幸いrendering..i Javaスクリプトで正常に動作しますドメイン間の問題は、CORS - クロスオリジンリソース共有を実装することで解決できます。データにを提供するサーバが応答でいくつかの余分なHTTP-ヘッダを送信していることを確認してください:

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

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