Integrate extjs and highcharts

Integrate extjs and highcharts

The painting of the highcharts library is better than ExtJS, but ExtJS has powerful class management. Both are good.

Generally, only one database is selected for commercial projects to reduce costs. However, if it is only used for non-profit projects, you can combine the two to use extjs's powerful class management and highcharts's powerful image functions. The advantages of both are also a good way to use them.

The extjs panel title is used, and the highchart drawing is used.

1. Import the data to the database using the following code: reference the extjs, jquery, and highcharts libraries.

 <script type="text/javascript" src="../ext-4.1.1a/ext-debug.js"></script><script type="text/javascript" src="../jquery-1.11.1.min.js"></script><script type="text/javascript" src="../Highcharts-4.0.4/js/highcharts.js"></script><script type="text/javascript" src="app.js"></script>

2 global configuration
The following code configures the class path in extjs and the global configuration options of highchart in the app. js file.

// Extjs path configuration Ext. loader. setConfig ({enabled: true, paths: {jack: 'app/Jack'}); // highchart global configuration Highcharts. setOptions ({global: {useUTC: false}, // colors: {//}, // lang: {//}, chart: {animation: false }});

In the following code, the file/jack/view/TemperatureHC. js defines a highchart variable to save the highchart handle, and sets the renderTo in highchart as the body element in extjs panel.

Ext.define('jack.view.TemperatureHC', {    extend: 'Ext.panel.Panel',    config: {        panelTitle: null,        chartTitle: null    },    requires: [        'Ext.panel.Panel'    ],        highchart: null,    constructor: function (config) {        this.initConfig(config);        this.callParent(arguments);    },    initComponent: function() {        var me = this;        if (me.panelTitle) {            me.title = me.panelTitle;        }        this.callParent(arguments);    },    afterComponentLayout: function(width, height, oldWidth, oldHeight) {        var me = this;        var chartId = me.id + "-body";        me.highchart = new Highcharts.Chart({            chart: {                renderTo: chartId,                animation: false            },            title: {                text: me.chartTitle            },            xAxis: {                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']            },            yAxis: {                title: {                    text: 'Temperature (°C)'                },                plotLines: [{                    value: 0,                    width: 1,                    color: '#808080'                }]            },            tooltip: {                valueSuffix: '°C'            },            legend: {                layout: 'vertical',                align: 'right',                verticalAlign: 'middle',                borderWidth: 0            },            series: [{                name: 'Tokyo',                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]            }, {                name: 'New York',                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]            }, {                name: 'Berlin',                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]            }, {                name: 'London',                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]            }]        });    }});

4 include and display

Ext. require (['ext. container. container ', 'Jack. view. temperatureHC ']); var pageContainer = null; Ext. onReady (function () {pageContainer = Ext. create ('Jack. view. temperatureHC ', {id: 'htcontainer', width: 800, height: 300, panelTitle: 'temperature this year', renderTo: Ext. getBody ()});});