Flash图表组件FusionCharts帮助文档十:将柱状图转换为饼状图

你有没有想过,将 FusionCharts 创建好的柱状图转换为一张饼状图,并且不需要改变初始数据。这个转换后的饼状图仍然支持动画和交互性(如饼图的分片、用鼠标旋转、标签工具条等)。

很简单,要改变图表类型,只需编辑先前的代码,更改SWF文件名称为Pie3D.swf

Flash图表组件FusionCharts帮助文档十:将柱状图转换为饼状图_第1张图片Flash图表组件FusionCharts帮助文档十:将柱状图转换为饼状图_第2张图片

    

在本例中,复制 weekly-sales.html 并将它在同一个文件夹中保存为weekly-sales-pie.html。最后,编辑HTML代码:

<html>
  <head>        
    <title>My First chart using FusionCharts XT - change chart type</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/Pie3D.swf", 
                     "myChartId", "400", "300", "0", "1" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
      
    // -->
    </script>      
  </body> 
</html>

解释一下上面这段代码,我们已经改变了SWF文件路径,之前是指向Column3D.swf的,现在指向Pie3D.swf。你需要从Charts 文件夹中复制Pie3D.swf。如果你现在在浏览器中打开HTML文件,会看到类似于下面这种饼图(点击图片查看在线Demo):

Flash图表组件FusionCharts帮助文档十:将柱状图转换为饼状图_第3张图片

单击饼图分片,分片扇形就会分离出来。或者在图表上右键单击选中"Enable Rotation",就可以用鼠标拖拽图表进行旋转。

注意,我们之所以能够在不改变数据的情况下转换图表类型,是因为新的图表类型与初始数据是兼容的。比如,在本例中,我们是将一个单序列的柱状图转换为单序列的饼图。也就是说,只有在两个图表都是单序列的时候,图表类型的初始数据才是有效的。如果你想在单序列图表上使用多序列数据,那么图表上就不会有任何数据显示。

你可能感兴趣的:(FusionCharts)