在extjs窗口中顯示am圖表

我一直在嘗試構建一個將amChart與extjs 2.3集成的示例web應用程序。我所要做的就是在彈出窗口中顯示圖表。我通過創建加載圖表的頁面來完成此操作，然後我在表單面板上使用autoLoad加載頁面。然後我把窗體面板放在窗口中。顯示頁面上的文字，但圖表不是。在extjs窗口中顯示am圖表

我使用amCharts 2.8.4和2.3的ExtJS

HTML加載圖表：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
     <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/ext-all.css" /> 
     <!-- GC --> 
     <!-- LIBS --> 
     <script type="text/javascript" src="frontend/include/lib/ext/adapter/ext/ext-base.js"></script> 
     <script type="text/javascript" src="frontend/include/lib/ext/ext-all.js"></script> 
     <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/xtheme-gray.css" /> 
     <script type="text/javascript" src="frontend/public/page/displayGraphs.js"></script> 
    </head> 
    <body> 
     <h1>Hello World!</h1> 
     <div id="buttonDiv"></div> 
    </body> 
</html>

JavaScript代碼，彈出窗口：

Ext.onReady(function(){ 

    function displayGraph() { 
     window.show(); 
    } 

    var displayButton = new Ext.Button({ 
     text: 'Display Graph', 
     renderTo:'buttonDiv', 
     tooltip: 'View the full message and delivery statuses', 
     handler : displayGraph 
    }); 

    var form = new Ext.form.FormPanel({ 
     border: false, 
     buttonAlign: 'center', 
     items:[] 
    }); 

    form.add({ 
     cls: 'someCls', 
     id: 'someId', 
     autoLoad: { 
      url:'graphs.jsp', 
      scripts:true 
     } 
    // html: '<div id="chartdiv" style="width: 100%; height: 355px;"></div>' 
    }) 

    var window = new Ext.Window({ 
     id: 'graphDetailsWindow', 
     title: 'View AmChart Graph', 
     modal: false, 
     closable: true, 
     closeAction: 'hide', 
     width: 800, 
     height: 480, 
     plain:true, 
     layout: 'fit', 
     items: [form] 
    }) 
});

amChartsExample.js：

var chart; 

var chartData = [{ 
    country: "USA", 
    visits: 3025, 
    color: "#FF0F00"}, 
{ 
    country: "China", 
    visits: 1882, 
    color: "#FF6600"}, 
{ 
    country: "Japan", 
    visits: 1809, 
    color: "#FF9E01"}, 
{ 
    country: "Germany", 
    visits: 1322, 
    color: "#FCD202"}, 
{ 
    country: "UK", 
    visits: 1122, 
    color: "#F8FF01"}, 
{ 
    country: "France", 
    visits: 1114, 
    color: "#B0DE09"}, 
{ 
    country: "India", 
    visits: 984, 
    color: "#04D215"}, 
{ 
    country: "Spain", 
    visits: 711, 
    color: "#0D8ECF"}, 
{ 
    country: "Netherlands", 
    visits: 665, 
    color: "#0D52D1"}, 
{ 
    country: "Russia", 
    visits: 580, 
    color: "#2A0CD0"}, 
{ 
    country: "South Korea", 
    visits: 443, 
    color: "#8A0CCF"}, 
{ 
    country: "Canada", 
    visits: 441, 
    color: "#CD0D74"}]; 


AmCharts.ready(function() { 
    // SERIAL CHART 
    chart = new AmCharts.AmSerialChart(); 
    chart.autoMarginOffset = 0; 
    chart.dataProvider = chartData; 
    chart.categoryField = "country"; 
    chart.startDuration = 1; 

    // AXES 
    // category 
    var categoryAxis = chart.categoryAxis; 
    categoryAxis.labelRotation = 45; // this line makes category values to be rotated 
    categoryAxis.gridAlpha = 0; 
    categoryAxis.fillAlpha = 1; 
    categoryAxis.fillColor = "#FAFAFA"; 
    categoryAxis.gridPosition = "start"; 

    // value 
    var valueAxis = new AmCharts.ValueAxis(); 
    valueAxis.dashLength = 5; 
    valueAxis.title = "Visitors from country"; 
    valueAxis.axisAlpha = 0; 
    chart.addValueAxis(valueAxis); 

    // GRAPH 
    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "visits"; 
    graph.colorField = "color"; 
    graph.balloonText = "[[category]]: [[value]]"; 
    graph.type = "column"; 
    graph.lineAlpha = 0; 
    graph.fillAlphas = 1; 
    chart.addGraph(graph); 

    // WRITE 
    chart.write("chartdiv"); 
});

來源

2013-01-11 euniceadu