Flash图表组件FusionCharts帮助文档十：将柱状图转换为饼状图-控件新闻-慧都网

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

原创|其它|编辑：郝浩|2012-11-22 15:27:46.000|阅读 3182 次

概述：本文告诉你如何将FusionCharts单序列的柱状图转换为单序列的饼状图，无需更改初始数据。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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

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

柱状图,FusionCharts 饼状图,FusionCharts

在本例中，复制 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）：

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

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：慧都控件

上一篇：图表组件TeeChart for PHP发布v2012版支持HTML5和SVG输出下一篇：iOS APP开发控件大盘点