funsionChart相关知识点整理

来源：互联网发布：数据分析经理编辑：程序博客网时间：2024/05/16 15:30

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>
横坐标标签分行显示：<BR>
<chart>
<set label='John Miller<BR>Score: 420<BR>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