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