Extjs3.4和fusioncharts3.2的整合

来源:互联网 发布:java反射获得属性值 编辑:程序博客网 时间:2024/04/30 21:44

1.不使用插件:

 

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
 <script type="text/javascript" src="test_mkm/FusionCharts.js"></script>
 <script type="text/javascript" src="extjs/ext-base.js"></script>
 <script type="text/javascript" src="extjs/ext-all.js"></script>
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <script type="text/javascript">
 Ext.onReady(function(){
  Ext.QuickTips.init();  
  
   var rtChart = new Ext.Panel({
          title:"Fault Chart",
          width:500,
          height:400,
          frame:false,
          //html:"<iframe id='iFrame_chart' name='iFrame_chart' width='100%' scrolling='no' height='100%'  frameborder='0' src='a.jsp'></iframe>",
          html:"<div id='chart'></div>",
          listeners:{
           "afterrender":renderHandler
          },
         renderTo:"da"

      });
   
 });
 function renderHandler(a){
  FusionCharts.setCurrentRenderer("javascript");
   var myChart = new FusionCharts("test_mkm/RealTimeLine.swf","myChartId","500","380","0","1");
   myChart.setXMLUrl("test_mkm/data.xml");     
     myChart.render("chart");
 }
 </script>
  </head>
 
  <body>
    <div id="da"></div>
  </body>
</html>

2.使用插件的方法:(部分代码)

红色部分顺序不能错

<script type="text/javascript" src="extjs/ux/fusionchart/uxmedia.js"></script>
  <script type="text/javascript" src="extjs/ux/fusionchart/uxflash.js"></script>  
  <script type="text/javascript" src="extjs/ux/fusionchart/uxfusion.js"></script>

 

 var MSCombi3D = new Ext.ux.FusionPanel({
                  title : "MSCombi3D Chart",
                  chartURL : "FusionChart3.2/swf/MSColumn3D.swf",
                  dataURL : "js/MSCol3D2.xml",
                  //dataXML:realTimePanel,
                  width : 500,
                  height : 400,
                  mediaCfg : {
                     width : 500,
                     height : 380,
                     params : {
                         scale : "exactfit"
                     }
                  },
                  renderTo : "d"

              });