我一直在尝试构建一个将 amChart 与 extjs 2.3 集成的示例 Web 应用程序。我所要做的就是在弹出窗口中显示图表。我通过创建一个加载图表的页面来做到这一点，然后我在表单面板上使用 autoLoad 来加载页面。然后我将表单面板放在窗口中。显示页面上的文本，但不显示图表。
我正在使用 amCharts 2.8.4 和 extjs 2.3
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");
});