0

以 Flash 格式实现了 Fusion 图表。是否可以将其转换为纯 javascript 形式？如果是，请您详细说明如何进行，即在哪些地方进行更改。

4

2 回答 2

6

如果您使用的是最新版本的 FusionCharts（3.3.0 及更高版本），只需替换../Column3D.swf为即可Column3D！确保您拥有FusionCharts.HC.js和FusionCharts.HC.Charts.js在同一文件夹中FusionCharts.js。你的代码看起来像......

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript">
       var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
       myChart.setXMLUrl("Data.xml");
       myChart.render("chartContainer"); 
    </script>      
  </body> 
</html>

但是，我还建议使用更具可读性的代码，例如...

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
    <script type="text/javascript">
       FusionCharts.addEventListener("ready", function () {
           var myChart = new FusionCharts({
               type: "column3d",
               id: "myChartId",
               width: "400",
               height: "300",
               renderAt: "chartContainer",
               dataSource: "Data.xml",
               dataFormat: "xmlurl"
           }).render();
       });
    </script>      
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
  </body> 
</html>
于 2013-10-22T10:54:22.377 回答
2

请确认您是否已经在使用 FusionCharts XT，现在如果您只想渲染 JavaScript 图表，无论是否安装了 Flash Player，您只需将以下单行代码添加到您现有的实现中。

FusionCharts.setCurrentRenderer('javascript');

此代码将要求 FusionCharts 渲染器跳过 Flash 渲染并创建纯 JavaScript 图表。

最终的 HTML 代码如下所示：

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript">
       FusionCharts.setCurrentRenderer('javascript');
       var myChart = new FusionCharts( "../Column3D.swf", "myChartId", "400", "300", "0", "1");
       myChart.setXMLUrl("Data.xml");
       myChart.render("chartContainer"); 
    </script>      
  </body> 
</html>

此外，为了渲染 JavaScript 图表，FusionCharts XT 使用了“FusionCharts.HC.js”、“FusionCharts.HC.Charts.js”和“jquery.min.js”。这些文件位于下载包的“图表”文件夹中。

您不需要在 HTML 中显式加载这些文件，而是将其放在与“FusionCharts.js”相同的文件夹中。“FusionCharts.js”自动负责加载。

此链接详细介绍了纯 JavaScript 图表渲染的详细信息。

于 2013-10-22T10:24:57.060 回答