问题
I am trying to build a chart inside a viewport, but can't figure out how.
Visit http://13.233.173.7/app2.html to view
I have tried importing var chart into overview-generic.js and specify chart as items: chart. It is not working
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<!-- ExtJS -->
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
<!-- Shared -->
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
<!-- Basic example styling -->
<link rel="stylesheet" type="text/css" href="leaflet/geoext2-2.0.3/examples/shared/example.css" />
<!-- You should definitely consider using a custom single-file version of OpenLayers -->
<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="http://openlayers.org/api/2.13.1/theme/default/style.css">
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="example-data.js"></script>
<script type="text/javascript" src="Area.js"></script>
<script type="text/javascript" src="overview-generic.js"></script>
<style>
.gx-overview-map .olControlOverviewMapElement {
padding: 0;
background-color: rgba(0, 0, 0, 0.5)
}
</style>
<style>
h1 { color: white; }
</style>
</head>
<body>
</body>
</html>
This is my overview-generic.js file
Ext.require('Ext.chart.*');
Ext.require([
'Ext.container.Viewport',
'GeoExt.panel.Map',
'Ext.fx.target.Sprite',
'GeoExt.OverviewMap',
'Ext.Window',
'Ext.layout.container.Fit',
'Ext.window.MessageBox'
]);
Ext.onReady(function () {
var attribution = '© terrestris GmbH & Co. KG <br>' +
'Data © OpenStreetMap ' +
'<a href="http://www.openstreetmap.org/copyright/en"' +
'target="_blank">contributors<a>';
// A viewport with a centered map panel and a sidebar
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: '<p><h1 textcolor=white> URBAN DISASTER RESPONSE SYSTEM</h1></p>'
},
// Map panel
// maps will be configurated as allOverlays = true
{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
split: true,
items: [
{
title: '<center>SELECT</center>',
html: 'SELECT',
bodyStyle: {'padding': '5px'},
flex: 0.7
},
// Generic overview container as a child component
{
title: 'Most Recent Incidents Reported',
flex: 0.8,
layout: 'fit',
html: 'Most Recent Incidents Reported'
},{
title: 'Total Cases Over Time for Each City',
flex: 1,
layout: 'fit',
html: 'sfsfd'
}
]
},{
region: 'center',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
split: true,
items: [
{
title: 'Disaster Vulnerability / Incidents',
flex: 2,
layout: 'fit',
items: { xtype: 'gx_mappanel',
center: [76.71753, 18.36914],
zoom: 6,
layers: [
new OpenLayers.Layer.WMS(
"OpenStreetMap WMS",
"http://ows.terrestris.de/osm/service?",
{layers: 'OSM-WMS'},
{ attribution: attribution }
),
new OpenLayers.Layer.WMS(
"Mahrashtra",
"http://13.233.173.7:8080/geoserver/mumbai/wms",
{layers: 'Mahrashtra',
format: 'image/png',
transparent: true
},
{
singleTile: true
}
)
]
},
},
// Generic overview container as a child component
{
title: 'Incidents by Hour',
flex: 1,
layout: 'fit',
html: 'sfs'
}
]
},
// Resizable sidebar with vbox layout
// Child components will be stretched to the width of the sidebar
{
region: 'east',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 300,
split: true,
items: [
{
title: ' Total Deaths',
html: 'TOTAL DEATH',
bodyStyle: {'padding': '5px'},
flex: 0.7
},
// Generic overview container as a child component
{
title: 'Total cases',
flex: 0.7,
layout: 'fit',
html: 'TOTAL CASE'
},{
title: 'Total Deaths by City',
flex: 1,
layout: 'fit',
html: 'TOTAL CASE'
},{
title: '<center>Helpline</center>',
flex: 0.8,
layout: 'fit',
html: '<p><center>NDMA Helpline: <b>011-1078</b></center></p><p><center>Maharashtra Control Room: <b>022-22027990</b></center></p><p><center> Greater Mumbai Emergency Operation Centre (Disaster Management Unit): <b>1916, 022-22694725, 022-22694727</b></center></p>'
}
]
}
]
});
});
This is the chart Area.js I am trying to insert in any one of the viewport item
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
style: {
opacity: 0.93
}
}]
});
var win = Ext.create('Ext.window.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
autoShow: true,
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
store1.loadData(generateData());
});
}
}, {
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}],
items: chart
});
});
Thanks in Advance
来源：https://stackoverflow.com/questions/65345785/ext-js-4-chart-inside-viewport