Question

您好我有一个简单的MVC extjs应用程序：

我的app.js：

Ext.Loader.setConfig({
    enabled: true,
    paths : {
        'Chart' : './Chart'
    }
});

Ext.require('Chart.ux.Highcharts');
Ext.require('Chart.ux.Highcharts.Serie');
Ext.require('Chart.ux.Highcharts.SplineSerie');

Ext.application({
    name: 'MyAppli',
    autoCreateViewport: true,
});

我的控制器：

showWindow: function () {

    var chartStore = this.getHighChartDataStore();
    var win = Ext.create('Ext.window.Window', {
        width : 800,
        height : 600,
        minHeight : 400,
        minWidth : 550,
        hidden : false,
        shadow : false,
        maximizable : true,
        collapsible: true,
        title : 'Highchart example',
        renderTo : Ext.getBody(),
        layout : 'fit',
        items : [{
            xtype : 'highchart',
            id : 'chart',
            defaultSerieType : 'spline',
            series : [{
                    dataIndex : 'yesterday',
                    name : 'Yesterday',
                    visible : true
                }, {
                    dataIndex : 'today',
                    name : 'Today',
                    visible : true
            }],
            store : chartStore,
            xField : 'time',
            chartConfig : {
                chart : {
                    type: 'spline',
                    marginRight : 130,
                    marginBottom : 120,
                    zoomType : 'x',
                    animation : {
                        duration : 1500,
                        easing : 'swing'
                    }
                },
                title : {
                    text : 'Standalone Highcharts for ExtJs 4 example',
                    x : -20 //center
                },
                subtitle : {
                    text : 'Random value',
                    x : -20
                },
                xAxis : [{
                    title : {
                        text : 'Time',
                        margin : 20
                    },
                    labels : {
                        rotation : 270,
                        y : 35
                    }
                }],
                yAxis : {
                    title : {
                        text : 'Value'
                    },
                    plotLines : [{
                        value : 0,
                        width : 1,
                        color : '#808080'
                    }]
                },
                plotOptions : {
                    series : {
                        animation : {
                            duration : 3000,
                            easing : 'swing'
                        }
                    }
                },       
                legend : {
                    layout : 'vertical',
                    align : 'right',
                    verticalAlign : 'top',
                    x : -10,
                    y : 100,
                    borderWidth : 0
                }
            }
        }]
    });
    win.show();
}

我的问题是上面的函数显示一个空窗口，而控制台说：函数Uncaught ReferenceError: Highcharts is not defined上的highcharts.js文件中的draw。

我做错了什么？我正在使用Extjs 4.1和最新的HighChart（取自github）。

我的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="app/view/combo_release.css">
        <script type="text/javascript" src="../extjs/ext-all.js"></script>
        <script type="text/javascript" src="app/app.js"></script>
        <script type="text/javascript" src="Chart/ux/highcharts.js"></script>
    </head>
    <body>
    </body>
</html>

Answer 1

在调用highcharts.js资源之前，您似乎还需要包含jquery（或其他受支持的js库）。

Answer 2

首先，您应该在highcharts.js 之前加入app.js 。其次看起来你应该在highstock.js之前加入highcharts.js。

HighCharts未定义

2 个答案: