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

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

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

相关链接:

你有没有想过,将 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):

饼状图,FusionCharts

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

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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat