5***@qq.com
5***@qq.com
  • 发布:2016-11-25 16:25
  • 更新:2017-01-23 12:22
  • 阅读:3149

highcharts在mui下使用问题

分类:MUI

引用的js包有3个。顺序是1.mui.min.js 2.jquery.min.js 3.highstock-all.js。用的时候报错[ERROR] : TypeError: undefined is not an object (evaluating 'j.info')
file name:myjs/highstock.js
line no:332
看了下是说highstock.js里面有代码识别不了。想大神帮忙看看这是什么问题,js包都是官网下的应该不会有错。是不是引用冲突的问题?望大神们帮忙解答。谢谢

代码如下:

<!doctype html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link href="css/mui.min.css" rel="stylesheet" />  

</head>  

<body>  
    <div class="mui-content">  
        <div class="mui-row">  
            <div class="mui-col-sm-12 mui-col-xs-12">  
                <div class="chart" id="main" style="min-width: 100%; height: 100%;">Highstock图表</div>  
            </div>  
        </div>  
        <div class="mui-row">  
            <div class="mui-col-sm-12 mui-col-xs-12">  
                <div class="mui-btn mui-btn-primary mui-col-sm-12 mui-col-xs-12" id="price">价格</div>  
            </div>  
        </div>  
        <div class="mui-row">  
            <div class="mui-col-sm-12 mui-col-xs-12">  
                <a class="mui-btn mui-btn-danger mui-col-sm-6 mui-col-xs-6 mui-pull-right" href="#"><span>看涨</span></a>  
                <a class="mui-btn mui-btn-success mui-col-sm-6 mui-col-xs-6" href="#"><span>看跌</span></a>  
            </div>  
        </div>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script src="myjs/jquery.min.js"></script>          
    <!--<script src="libs/highstock-all.js"></script>-->  
    <script src="myjs/highstock.js"></script>  

    <script>  

        $.noConflict();  
        //行情数据格式:{时间,货币编号,买价,卖价}  
        function Obj(Time, Symbol, BuyPrice, SellPrice)   
        {  
            this.DtTime = Time;  
            this.Hb = Symbol;  
            this.Price = BuyPrice;  
            this.AskPrice = SellPrice;  
        };  

        var HistoryFormData={  
            TaskGuid:"ab8495db-3a4a-4f70-bb81-8518f60ec8bf",  
            UserID:"",  
            DataType: "MT4DataHistory",  
            Top: "100",  
            Type: "FDXZ6"  
        };  

        //全局变量用于获取当前时间的毫秒值  
        var getdate;  
        //websocket对象用于建立连接  
        var socket;  
        //全局变量用于接收当前的行情数据和上一个接收到的数据  
        var obj_New,obj_Pre;  
        //全局变量highstock图表的数据源  
        var series;  
        //图表对象  
        var chart = null;  

// var host = "ws://139.196.207.149:2012";
var host = "ws://192.168.85.144:2012";
// var host = "ws://127.0.0.1:2014/WebSocketChatDemo";
// var host = "ws://127.0.0.1:8080/ChatWebSocket";
// var host = "ws://139.196.242.162:2012";

        mui.init({  
            swipeBack: false,  
            statusBarBackground: '#f7f7f7',  
            gestureConfig: {  
                doubletap: true  
            }  
        });  

        mui.plusReady(function(){  

            //仅支持竖屏显示  
            plus.screen.lockOrientation("portrait-primary");  
            try {  

                    //highstock图表的全局定义  
                    Highcharts.setOptions({  
                            global: {  
                                useUTC: false//世界标准时间,如果为true,中国的时间经highcharts处理会减8个小时  
                            },  
                            lang: {  
                                rangeSelectorZoom: '', // hidden the text 'Zoom' show in chart  
                                loading:'数据载入中...'  
                            },  
                           credits: {  
                                enabled: false//去掉右下角的标志  
                            },  

                           zoom: {  
                                enabled: false//去掉右下角的标志  
                            },  

                           //animation: {  
                           //     enabled: false//去掉动画  
                           // },  
                           // exporting: {  
                           //     enabled: false//去掉截图  
                           // }  
                        });  

//

                    var strjson=JSON.stringify(HistoryFormData);//获取历史行情参数json序列化  
                    console.log(strjson);  
                    mui.ajax('http://139.196.207.149:10015/WebDB.asmx/TransformData', {  
                    data: {  
                        "user": strjson  
                    },  

                    type: 'POST', //HTTP请求类型    
                    dataType: 'json', //服务器返回json格式数据    
                    timeout: 100000, //超时时间设置为10秒;    
                    headers: {  
                        'Content-Type': 'application/json'  
                    },  
                    success: function(data) {  
                        console.log("success");  
                        //服务器返回响应,根据响应结果,分析是否登录成功;    
                        var jsons = data.d;  
                        //                                      console.log(jsons);  
                        var v_date = new Date();  
                        console.log("服务器返回值" + v_date.toTimeString());  
                        console.log(jsons);  

                        DrawHistroyData(jsons);  

// $("#price").html(obj_New.Price);
},
error: function(xhr, type, errorThrown) {
mui.toast("当前网络不给力,请稍后再试");
console.log(xhr + type + errorThrown);
}
});

                    if ("WebSocket" in window) {  
                        socket = new WebSocket(host);//wss://192.168.85.12:4141/chat 表示进行加密传输的websocket协议。  
                    }  
                    else if ("MozWebSocket" in window) {  
                        socket = new MozWebSocket(host);  
                    }  

                    socket.onopen = function (openEvent) {  
                        //document.getElementById("serverStatus").innerHTML = 'WebSocket Status:: Socket Open';  
                        if (window.console)  
                            console.log('WebSocket Status:: Socket Open');  
                    };  

                    socket.onmessage = function (messageEvent) {  
                        console.log(messageEvent.data);  

                        if (messageEvent.data instanceof Blob)//messageEvent.data是不是二进制大对象  
                        {  
                            var destinationCanvas = document.getElementById('destination');  
                            var destinationContext = destinationCanvas.getContext('2d');  
                            var image = new Image();  
                            image.onload = function () {  
                                destinationContext.clearRect(0, 0,  
                                   destinationCanvas.width, destinationCanvas.height);  
                                destinationContext.drawImage(image, 0, 0);  
                            }  
                            image.src = URL.createObjectURL(messageEvent.data);  
                        }  
                        else {  
                            console.log(messageEvent.data);  
                            //document.getElementById("serverResponse").innerHTML = 'Server Reply:: ' + messageEvent.data;  
                            if (series != undefined)  
                            {  
                                if (messageEvent.data.toString().indexOf("Data") == 0)   
                                {  
                                    var strs = new Array(); //定义一数组   
                                    strs = messageEvent.data.split(","); //字符分割   

                                }  

                            }  
                            else  
                            {  
                                console.log("初始化失败!");                                  
                            }                             
                        };  
                    };  

                    socket.onerror = function (errorEvent) {  
                        //document.getElementById("serverStatus").innerHTML = 'WebSocket Status:: Error was reported';  
                        if (window.console)  
                            console.log('WebSocket Status:: Error was reported');  
                        if ("WebSocket" in window) {  
                            socket = new WebSocket(host);//wss://192.168.85.12:4141/chat 表示进行加密传输的websocket协议。  
                        }  
                        else if ("MozWebSocket" in window) {  
                            socket = new MozWebSocket(host);  
                        }  
                    };  

                    socket.onclose = function (closeEvent) {  
                        //document.getElementById("serverStatus").innerHTML = 'WebSocket Status:: Socket Closed';  
                        if (window.console)  
                        console.log('WebSocket Status:: Socket Closed');  
                    };  
            }  
            catch (exception) { if (window.console) console.log(exception); }  

            //function sendTextMessage() {  

            //    if (socket.readyState != WebSocket.OPEN) return;  

            //    //var e = document.getElementById("textmessage");  
            //    socket.send("你好");  
            //}  

            //function sendBinaryMessage() {  
            //    if (socket.readyState != WebSocket.OPEN) return;  

            //    //var sourceCanvas = document.getElementById('source');  

            //    socket.send(sourceCanvas.msToBlob());  
            //}      

        });  

        //获取当前时间的详细信息  
        function xAialStartEndPoint() {  
            var date = new Date();  
            var a = {  
                year: date.getFullYear(),  
                month: (date.getMonth()+1),  
                day: date.getDate(),  
                hour: date.getHours(),  
                minute: date.getMinutes(),  
                second: date.getSeconds(),  
                week:date.getDay()  
            }  
            //console.log(a);  
            return a;      
        }  

        //商品交易时间  
        function WorkTime(Symbol) {  
            switch (Symbol)  
            {  
                case "美原油":  
                    {  
                        if ((xAialStartEndPoint().week != 0 && xAialStartEndPoint().week != 6  
                            && ((Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "03:50:00"))  
                            || (Date.parse(new Date().toString()) > Date.parse(new Date().toDateString() + " " + "09:15:00"))))  
                            || ((Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "03:50:00"))  
                            && (xAialStartEndPoint().week == 6))  
                           )   
                        {  
                            return true;  
                        }  
                        else   
                        {  
                            return false;  
                        }  
                        break;  
                    }  
                case "恒生指数":  
                    {  
                        if ((xAialStartEndPoint().week != 0 && xAialStartEndPoint().week != 6  
                             && (Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "12:00:00"))  
                             && (Date.parse(new Date().toString()) > Date.parse(new Date().toDateString() + " " + "09:15:00")))  
                            || (xAialStartEndPoint().week != 0 && xAialStartEndPoint().week != 6  
                            && (Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "16:15:00"))  
                            && (Date.parse(new Date().toString()) > Date.parse(new Date().toDateString() + " " + "13:00:00")))  
                            )  
                        {  
                            return true;  
                        }  
                        else  
                        {  
                            return false;  
                        }  
                        break;  
                    }  
                case "德国指数":  
                    {  
                        if ((xAialStartEndPoint().week != 0 && xAialStartEndPoint().week != 6  
                           && ((Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "04:00:00"))  
                           || (Date.parse(new Date().toString()) > Date.parse(new Date().toDateString() + " " + "14:00:00"))))  
                           || ((Date.parse(new Date().toString()) < Date.parse(new Date().toDateString() + " " + "04:00:00"))  
                           && (xAialStartEndPoint().week == 6))  
                          ) {  
                            return true;  
                        }  
                        else {  
                            return false;  
                        }  
                        break;  
                    }  
            }     
        }  

        //获取历史数据初始化highstock图表  
        function DrawHistroyData(data)  
        {  

// var stockdata = JSON.parse(data);
var stockdata = eval(data);
console.log(stockdata);
//新建图表并初始化
chart=new Highcharts.StockChart({
chart: {
//关闭平移
//panning:false,
//zoomType: 'none',
//pinchType:'none',
renderTo:"main",
margin: [20, 5,25, 75],//外边框和绘图区的距离
spacing: [0,0,0,0],//外边框和标签,按钮等内容的距离
backgroundColor: '#014d87',//图表背景颜色
//backgroundColor: '',
borderColor: '#EBBA95', //图表外边框
borderWidth: 0,
borderRadius: 10,
//plotBackgroundColor: '#014d87',//绘图区域的背景色
plotBackgroundColor: '',
plotBorderColor: '#3C94C4',
plotBorderWidth: 2, //绘图边框
//plotShadow: true,
events: {
load: function () {
series = this.series[0];
//setInterval(Time_1S = function() {
// if (socketflage)//保证websocket没有接受到最新数据
// {
// obj_New.Time = new Date().getTime();
// var b = {
// x: parseInt(obj_New.Time),
// y: parseFloat(obj_New.BuyPrice),
// //name: parseFloat(obj_New.SellPrice).toString()
// };
// series.addPoint(b, true, false);
// if ((series.xData[0] + 3 60 1000) < parseInt(obj_New.Time)) {
// series.removePoint(0);
// }
// //chart.redraw();
// //series.yAxis.removePlotLine('old');
// //series.yAxis.addPlotLine({
// // id: 'old',
// // color: 'green', //线的颜色,定义为红色
// // dashStyle: 'dash',//标示线的样式,默认是solid(实线),这里定义为长虚线
// // value: obj_New.BuyPrice, //定义在哪个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
// // width: 2 //标示线的宽度,2px
// //});
// }

                            //}, 1000);  
                        }  
                    },  

                },  
                tooltip: {  
                    backgroundColor: '#FCFFC5',   // 背景颜色  
                    borderColor: 'black',         // 边框颜色  
                    borderRadius: 10,             // 边框圆角  
                    borderWidth: 3,               // 边框宽度  
                    //shadow: ture,                 // 是否显示阴影  
                    //animation: true,             // 是否启用动画效果  
                    style: {                      // 文字内容相关样式  
                        color: "#ff0000",  
                        fontSize: "12px",  
                        fontWeight: "blod",  
                        fontFamily: "Courir new",  

                    },  
                    crosshairs: [{            // 设置准星线样式  
                        width: 1,  
                        color: 'green',  
                        dashStyle: 'longdashdot',  
                    }, {  
                        width: 1,  
                        color: "green",  
                        dashStyle: 'longdashdot',  
                        zIndex: 100  
                    }],  
                    positioner: function () { //固定位置显示提示框  
                        return {  
                            x: 60,  
                            y: 80  
                        }  
                    },  
                    //dateTimeLabelFormats: {  
                    //    millisecond: "%A, %b %e, %H:%M:%S.%L",  
                    //    second: "%A, %b %e, %H:%M:%S",  
                    //    minute: "%A, %b %e, %H:%M",  
                    //    hour: "%A, %b %e, %H:%M",  
                    //    day: "%A, %b %e, %Y",  
                    //    week: "Week from %A, %b %e, %Y",  
                    //    month: "%B %Y",  
                    //    year: "%Y"  
                    //},  
                    formatter: function () {  
                        //console.log(this.points);  
                        var s = '<b>' + Highcharts.dateFormat("%A,%b %e,%H:%M:%S", this.x) + '</b>';  
                        $.each(this.points, function () {  
                            s += '<br/>价格:' + this.y;  
                             //s += '<br/>buy price:' + this.y + '<br/>sell price:' + this.point.name;  
                        });  
                        //s += '<br/>buy price:' + this.y + '<br/>sell price:' + this.points[0].key;  
                        return s;  
                    },  
                    shared: true,//多y轴情况下  
                    useHTML: true,  
                },  
                plotOptions: {  
                    line: {  
                        color: 'red'//折线图的颜色  
                    }  
                },  
                //rangeSelector: {  
                //    buttonTheme: {  
                //        //display: 'none', // 不显示按钮  
                //        width: 50,  
                //        height: 20  
                //    },  
                //    buttons: [{  
                //        count: 1,  
                //        type: 'minute',  
                //        text: '1M'  
                //    },  
                //    {  
                //        type: 'all',  
                //        text: 'All'  
                //    }],  
                //    inputEnabled: false,// 不显示日期输入框  
                //    selected: 0  
                //},  
                //title: {  
                //    text: 'Live random data'  
                //},  
                navigator: { enabled: false },  
                scrollbar: { enabled: false },  
                rangeSelector: { enabled: false },  
                credits: { enabled: false },  

                series: [{  
                    name: '最新价',  
                    data: (function () {  

                        var data = [], i;  
                        if (stockdata.length > 0) {  
                            for (i = 0; i < stockdata.length-1; i++) {  
                                var a = {  
                                    x: parseInt(Date.parse(stockdata[i].DtTime)),  
                                    y: parseFloat(stockdata[i].Price),  
                                    //name: parseFloat(stockdata[i].SellPrice).toString(),  
                                };  
                                data.push(a  
                                    //[  
                                   //parseInt(stockdata[i].Time),  
                                   //parseFloat(stockdata[i].BuyPrice),  
                                   //parseFloat(stockdata[i].SellPrice),  
                                    //]  
                                );  
                            }  
                            //保存历史数据最近的一个数据  
                            obj_New = new Obj(Date.parse(stockdata[stockdata.length - 1].DtTime), stockdata[stockdata.length - 1].Hb, stockdata[stockdata.length - 1].Price, stockdata[stockdata.length - 1].AskPrice);  
                        }  
                        else {  
                            var a = {  
                                x: parseInt((new Date().getTime() - 2 * 60 * 1000)),  
                                y: parseFloat(0),  
                                //name: parseFloat(stockdata[i].SellPrice).toString(),  
                            };  
                            data.push(a  
                                //[  
                               //parseInt(stockdata[i].Time),  
                               //parseFloat(stockdata[i].BuyPrice),  
                               //parseFloat(stockdata[i].SellPrice),  
                                //]  
                            );  
                            //保存历史数据最近的一个数据  
                            obj_New = new Obj(a.x, "HKX6", a.y, a.y);  
                        }  
                        console.log(data);  

                        return data;  

                    }())  

                }],  
                xAxis: {  
                    type: 'datetime',  
                    //min: new Date(xAialStartEndPoint().year, xAialStartEndPoint().month, xAialStartEndPoint().day, xAialStartEndPoint().hour - 1, xAialStartEndPoint().minute).getTime(),  
                    //min: stockdata[stockdata.length - 1].Time,  
                    //max: new Date(xAialStartEndPoint().year, xAialStartEndPoint().month, xAialStartEndPoint().day, xAialStartEndPoint().hour, xAialStartEndPoint().minute, xAialStartEndPoint().second).getTime(),  

                    //tickInterval:1000,//x轴的间隔  
                    gridLineDashStyle: 'solid',  
                    gridLineWidth: 1,  
                    gridLineColor: '#d0d0d3',  
                    tickLength: 10,  
                    tickWidth: 1,  
                    tickPosition: 'inside',  
                    lineWidth:0,  
                    //events:{  
                    //    setExtremes: function (e) {  
                    //        console.log(e);  
                    //        var xMin = e.min;  
                    //        var xMax = e.max;   
                    //        var zmRange = computeTickInterval(xMin, xMax);  
                    //        this.chart.xAxis[0].options.tickInterval =zmRange;  
                    //        this.chart.xAxis[0].isDirty = true;  
                    //    },  
                    //},  

                    //tickPixelInterval: 50,  
                    //ordinal: false,  
                    //min: minTime,//minTime 与maxTime  都是变量  
                    //max: maxTime,  
                    //showFirstLabel: true,  
                    //showLastLabel: true,  
                    labels: {  
                        formatter: function () {  
                            return Highcharts.dateFormat('%H:%M:%S', this.value);  

                        },  
                        style: { "color": "white" }  
                    },  
                    units: [['minute', [1]  
                    ]],  

                },  
                yAxis: {  
                    showFirstLabel: true,  
                    showLastLabel: true,  

                    //events:{  
                    //    setExtremes: function(e) {  
                    //        var xMin = e.min;  
                    //        var xMax = e.max;   
                    //        var zmRange = computeTickInterval(xMin, xMax);  
                    //        this.chart.yAxis[0].options.tickInterval =zmRange;  
                    //        this.chart.yAxis[0].isDirty = true;  
                    //    },  

                    labels: {  
                        align:'right',  
                        //staggerLines:6,  
                        style: { "color": "white" },  
                        formatter: function () {  
                            return this.value;  
                            //var str = this.value.toString();  
                            //if (str.indexOf(".") == -1)  
                            //{  
                            //    return this.value;  
                            //}  
                            //else  
                            //{  
                            //    return this.value.toFixed(2);//这里是两位小数  
                            //}                    
                        }  
                    },  
                    //plotLines: [{  
                    //    id:'old',  
                    //    color:'green',            //线的颜色,定义为红色  
                    //    dashStyle:'dash',//标示线的样式,默认是solid(实线),这里定义为长虚线  
                    //    value:obj_New.BuyPrice,                //定义在哪个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线  
                    //    width:2                //标示线的宽度,2px  
                    //}],  
                    gridLineDashStyle: 'solid',  
                    gridLineWidth: 1,  
                    gridLineColor: '#d0d0d3',  
                    opposite: false,//y轴显示在左边  
                    offset: -10,//标签距离y轴的距离  
                },  
           })  
        }  

    </script>  

</body>  

</html>

2016-11-25 16:25 负责人:无 分享
已邀请:
小虎虎

小虎虎

可以不用 JQuery.js
把这个包去掉就可以了

该问题目前已经被锁定, 无法添加新回复