funsionChart相关知识点整理

funsionChart相关知识点整理

1、定时只更新图表的数据
var newXMLData = getNewXMLData();
var chartObj = getChartFromId("chartId");
chartObj.setDataXML(newXMLData);

2、兼容多浏览器的方式使用去flash的设置:
FusionCharts.setCurrentRenderer('javascript');

3、封装调用fusionCharts的方法
setChartCommon:function(chartDivID,dataXml,swfPath,chartID,width,height,param1,param2,param3,param4){       Y.one("#"+chartDivID).set("innerHTML","");      
 var myChart = new FusionCharts(swfPath, chartID, width, height, param1, param2 ); 
 myChart.setDataXML(dataXml);    
 myChart.setTransparent(true);//设置透明
 myChart.configure("ChartNoDataText", i18nStrings.chartNoDataText);//设置空数据的提示
 myChart.configure("PBarLoadingText", i18nStrings.pBarLoadingText);//设置加载的提示
 myChart.render(chartDivID); 
},

4、fusionchart增加按钮连接:
myChart.configureLink(
  {
    swfUrl: 'Charts/Bar2D.swf',
    width: '30%',           
    overlayButton:
    {    
      message: ' x ',
      bgColor:'999999',
      borderColor: 'cccccc'
    }
  },
0);

5、注意最后两个参数一定是0,1,不然事件方法是不会调用的
 var chart1 = new FusionCharts("Column3D.swf", "chart1Id", "400", "300", "0", "1");

6、单击fusioncharts图表,弹出界面( clickURL):
<chart caption='Monthly Sales Summary'  clickURL='n-http://www.infosoftglobal.com'>

7、单击图片中的单个属性,给提示信息:
 <set label='Hong Kong' value='235' link="JavaScript:myJS('Hong Kong, 235');"/> 
<SCRIPT LANGUAGE="JavaScript">       
         function myJS(myVar){
            window.alert(myVar);
         }      
</SCRIPT>

8、设置背景透明:
1.In the chart's XML data, set <chart ... bgAlpha='0,0' ..>
2.myChart.setTransparent(true);

9、自适应大小:
var chart1 = new FusionCharts("Column2D.swf", "ChId1", "100%", "100%", "0", "0", "FFFFFF", "exactFit");
 chart1.setDataURL("Data.xml");
 chart1.render("chart1div");

10、相关属性
动画效果:animation  0/1
x轴显示:labelDisplay WRAP/STAGGER/ROTATE/NONE 
旋转显示:<chart labelDisplay='Rotate' slantLabels='1' ..> 
          45度旋转或90度旋转labelDisplay='ROTATE' slantLabels='1'
图例透明:legendBgAlpha = '0'
图例显示属性(Legend Properties ):
legendPosition  BOTTOM or RIGHT 
showLegend 0/1

11、tooltip分行显示: 
如果tooltip过长,可分行显示,在tooltip中增加{br}
<chart>
<set label='John' value='420' tooltext='John Miller{br}Score: 420{br}Rank:2'/> 
</chart> 
横坐标标签分行显示:&lt;BR&gt;
<chart>
   <set label='John Miller&lt;BR&gt;Score: 420&lt;BR&gt;Rank:2' value='420' />
<、chart>


12、动画:
 <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
 <apply toObject='Canvas' styles='CanvasAnim' />

13、fusionCharts双击事件:变通实现(IE不支持,firefox可以)
在fusionCharts上面加一个<div>层,<div>上加双击事件就可以了

14、仪表盘样式:http://www.fusioncharts.com/demos/gallery/#gauges

15、fusionCharts在线文档:http://docs.fusioncharts.com/widgets/Contents/

16、解决fusionchart的一般中文问题:http://wangyaobeijing.blog.163.com/blog/static/158330320118149753377/


原文:http://hi.baidu.com/fishman0923/item/ebcd3f617a910a1b7cdeccfb

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值