G4Studio+extjs+highcharts 下在ext4j的panel中放入hightCharts图表

Posted 2020-09-22 cynchanpin

在G4Studio+extjs下。创建一个panel,然后将highCharts图表放入panel中。实现方法例如以下：

首先简单给出的部分代码：

 Ext.onReady(function() {
                       
                        var panel = new Ext.Panel({
				title: ‘‘,
				region:‘center‘,
				items: [{
					html: ‘<div id="container" style="width: auto;height: 487px; margin: 0 

auto">aaa</div>‘,
					afterRender: function () {
						 createReport();
					}
				}]
			})

			// 布局模型
			var viewport = new Ext.Viewport({
				layout : ‘border‘,
				items : [ panel]
			});

			function createReport(){
				var chart;
				chart = new Highcharts.Chart({
					 chart: {
						 renderTo: ‘container‘,
				         type: ‘column‘
				        },
				        title: {
				            text: ‘Monthly Average Rainfall‘
				        },
				        subtitle: {
				            text: ‘Source: WorldClimate.com‘
				        },
				        xAxis: {
				            categories: [
				                ‘Jan‘,
				                ‘Feb‘,
				                ‘Mar‘,
				                ‘Apr‘,
				                ‘May‘,
				                ‘Jun‘,
				                ‘Jul‘,
				                ‘Aug‘,
				                ‘Sep‘,
				                ‘Oct‘,
				                ‘Nov‘,
				                ‘Dec‘
				            ]
				        },
				        yAxis: {
				            min: 0,
				            title: {
				                text: ‘Rainfall (mm)‘
				            }
				        },
				        tooltip: {
				            headerFormat: ‘<span style="font-size:10px">{point.key}</span>‘,
				            pointFormat: ‘‘ +
				                ‘‘,
				            footerFormat: ‘<table><tbody><tr><td style="color:{series.color};padding:0">

{series.name}: </td><td style="padding:0"><b>{point.y:.1f} mm</b></td></tr></tbody></table>‘,
				            shared: true,
				            useHTML: true
				        },
				        plotOptions: {
				            column: {
				                pointPadding: 0.2,
				                borderWidth: 0
				            }
				        },
				        series: [{
				            name: ‘Tokyo‘,
				            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 

95.6, 54.4]

				        }, {
				            name: ‘New York‘,
				            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 

92.3]

				        }, {
				            name: ‘London‘,
				            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

				        }, {
				            name: ‘Berlin‘,
				            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

				        }]
				});
			}
}）

createReport方法里的内容是直接从highCharts官网上copy的。通过这样的方法就能够将highCharts图表增加panel,但对引用上面js的页面。相同要引入须要的js，如：

<G4Studio:import src="/resource/commonjs/highcharts.js" />
<G4Studio:import src="/resource/commonjs/highcharts_exporting.js" />

??