Highcharts 中文社区

查看: 710|回复: 2

[技术贴] 从后台加载的数据,如何加载到图形界面上

[复制链接]

该用户从未签到

2

主题

5

帖子

20

积分

HC 新手

Rank: 1

积分
20
发表于 2019-9-7 09:16:24 | 显示全部楼层 |阅读模式
$(document).ready(function () {
    Highcharts.setOptions({ // 当X轴类型为datetime日期时间型的,需要设置时区
        global: {
            // useUTC: false
            useUTC: true
        }
    });

    chart = Highcharts.chart('container', {    // 通过构造函数配置
        chart: {
            type: 'spline',//图表类型为曲线图
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                    load: requestData     // 图表加载完毕后执行的回调函数
               //  load: function () {
                                    // HighCharts设置每秒更新图表
               //      // set up the updating of the chart each second
               //      var series = this.series[0];
               //      // 每隔5秒钟,图表更新一次
               //      setInterval(function () {
               //          var x = (new Date()).getTime(), // 当前时间
               //              y = Math.random();// y 数据值
               //          series.addPoint([x, y], true, true);
               //      }, 5000);
               //  }
            }
        },
        credits: {
            enabled: false   //右下角不显示LOGO
        },
        title: {
            text: '指 数 流 动 变 化 一 览'
        },
        xAxis: {
            type: 'datetime',// x 轴为日期时间类型
            dateTimeLabelFormats:{
                    day: '%e of %b'
            },
            tickPixelInterval: 150// x 轴标签间隔
        },
        yAxis: {// 设置 y 轴
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {// 当鼠标悬置数据点的提示框
            formatter: function () {// 格式化提示信息
                return '<b>' + this.series.name + '</b><br/>' +
                    // Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    // Highcharts.numberFormat(this.y, 2);
                    Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false        // 设置图例不可见
        },
        exporting: {
            enabled: false        //设置导出按钮不可用
        },
        series: [{
            name: 'Random data',
            data: []
            // data: (function () {// 设置默认数据
            //     // generate an array of random data
            //     var data = [],
            //         time = (new Date()).getTime(),
            //         i;

            //     for (i = -30; i <= 0; i += 1) {
            //         data.push({
            //             x: time + i * 1000,
            //             y: Math.random()
            //         });
            //     }
            //     return data;
            // }())
        }]
    });
});
下面是ajax 请求返回数据,但数据并没有能加载到图表中,新手小白,求指点
function requestData() {
                $.ajax({
                    url: '{{ url('MobCoe/Index') }}',
                    type: 'get',
                dataType: 'json',
                cache: false,     //不从浏览器缓存中加载请求信息  
                    success: function(data) {
                           
                            // 确保数据接口返回的数据是 JSON 对象,如果是JSON 字符串,可以用 JS 转换
                            // if(typeof data.resultData === 'string') {result = JSON.parse(data.resultData); typeof result }
                            // console.log(result);
                                    // chart.series[0].name.push({
                                    //         y: result[1]['InstrumentID']
                                    // })
                            // for(var i=0; i<result.length; i++){
                            //         chart.series[0].data.push({
                            //                 x: result['Time'],
                            //                 y: result['MobCoe']
                            //         })
                            // }
                                // chart.series[0].data = result;
                                console.log(data.resultData)
                                var series = chart.series[0],
                                shift = series.data.length > 30; // 当数据点数量超过 30 个,则指定删除第一个点
                                   console.log(shift)
                                // 新增点操作
                                //具体的参数详见:https://api.hcharts.cn/highcharts#Series.addPoint
                              // chart.series[0].addPoint(data.resultData, true, shift);
                              chart.series[0].addPoint(data.resultData, true, shift);
                              console.log(series.data)
                              // 一秒后继续调用本函数
                              // setTimeout(requestData, 1000);
                    },
                });
        }

上面图片是打印后台返回的数据 @0BOF{DRGJWISIV9@SK@1WA.png

该用户从未签到

2

主题

5

帖子

20

积分

HC 新手

Rank: 1

积分
20
 楼主| 发表于 2019-9-7 10:03:11 | 显示全部楼层
function requestData() {
        $.ajax({
                url: '{{ url('MobCoe/Index') }}',
                type: 'get',
        dataType: 'json',
        cache: false,     //不从浏览器缓存中加载请求信息  
                success: function(data) {
                           
                    // 确保数据接口返回的数据是 JSON 对象,如果是JSON 字符串,可以用 JS 转换
                    if(typeof data.resultData === 'string') {result = JSON.parse(data.resultData); typeof result }
                    // console.log(result);
                                    // chart.series[0].name.push({
                                    //         y: result[1]['InstrumentID']
                                    // })
                    // result = data.resultData;
                    // console.log(result)
                    for(var i=0; i<result.length; i++){
                            console.log(result[i]['Time']);
                            chart.series[0].data.push({
                                    x: result[i]['Time'],
                                    y: result[i]['MobCoe']
                            })
                    }

                        console.log(chart.series[0].data)
                        var series = chart.series[0],
                        shift = series.data.length > 30; // 当数据点数量超过 30 个,则指定删除第一个点
                           console.log(shift)
                                // 新增点操作
                                //具体的参数详见:https://api.hcharts.cn/highcharts#Series.addPoint
                              // chart.series[0].addPoint(data.resultData, true, shift);
                    chart.series[0].addPoint(data.resultData, true, shift);
                    // console.log(series.data)
                              // 一秒后继续调用本函数
                              // setTimeout(requestData, 1000);
                },
        });
}
目前看来,数据是有加载,但是在加载到图表上时出错。求指点!
highcharts.js:294 Uncaught TypeError: c[r].destroyElements is not a function
    at l.generatePoints (highcharts.js:294)
    at l.translate (highcharts.js:296)
    at l.redraw (highcharts.js:313)
    at highcharts.js:252
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:27)
    at a.Chart.redraw (highcharts.js:252)
    at l.addPoint (highcharts.js:333)
    at Object.success (indexDrop:4708)
    at c (VM1267 jquery.min.js:3)

该用户从未签到

2

主题

5

帖子

20

积分

HC 新手

Rank: 1

积分
20
 楼主| 发表于 2019-9-7 14:11:43 | 显示全部楼层
本帖最后由 lg23 于 2019-9-7 14:14 编辑

应该是数据格式问题,但目前我调后C:\Users\lenovo\Desktop\GXE%5DMOJ4NXP5)NG%5BB`}{)OQ.png出现如图,x轴没有数据
我实际数据格式是C:\Users\lenovo\Desktop\YE%5B%5DQYPN4FT@`}_P79O1PD7.png
YE[]QYPN4FT@`}_P79O1PD7.png
GXE]MOJ4NXP5)NG[B`}{)OQ.png
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表