Fusion Charts, from flash to pure javascript

Fusion Charts, from flash to pure javascript

本文关键字：to pure javascript flash from Charts Fusion      更新时间：2023-09-26

以flash格式实现了融合图表。是否可以将其转换为纯JavaScript形式？如果是，您能否详细说明如何做到这一点，即在哪些地方进行更改。

如果您使用的是最新版本的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>

请确认您是否已经在使用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 图表渲染的详细信息在此链接中详细提及。

相关文章：