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

標籤：chart   ext   auto   ane   pad   repo   idt   實現   extjs   

在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" />

??

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