Highcharts 中文社区

查看: 2187|回复: 1

[数据模块] 读取本地后台数据后,怎样给data的二维数组赋值的问题

[复制链接]

该用户从未签到

1

主题

1

帖子

37

积分

HC 新手

Rank: 1

积分
37
发表于 2017-3-26 18:31:54 | 显示全部楼层 |阅读模式
如题,ajax读取本地的数组,然后赋值给二维数组;
也就是说,画图时的x,y值都是从后台读取,然后赋值,怎样实现
主要帮忙看下红色部分的字体,有什么问题
拜托了!

<html>
<body>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./js/1.js"></script>
<script type="text/javascript" src="./js/2.js"></script>

<div id="container" style="width: 1000px; height: 620px;"></div>

<script type="text/javascript">
$(document).ready(function(){
    var chart = new Highcharts.chart('container', {
        credits: {
            enabled: false
        },
        chart: {
            type: 'scatter',
            plotBackgroundImage: '250.jpg' //设置图表的背景图片
        },
        title: {
            text: 'Indoor location display'
        },
        subtitle: {
            text: 'Based on WiFi for indoor location'
        },
        xAxis: {
            min:0,
            max:10,
            allowDecimals: 'true',
            title: {
                enabled: true,
                text: 'X axis(m)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            tickPositions: [0, 1.24, 2.48, 3.72, 4.96, 6.20], // 指定竖轴坐标点的值
            gridLineWidth: 0,
            title: {
                text: 'Y axis(m)'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} m, {point.y} m'
                }
            }
        },
        series: [{
            name: 'Location',
            color: 'rgba(  0,  0,255, .5)',
            //data: [[1.24, 2.69], [4.58, 5.09], [1.58, 4.28], [3.088, 5.0888], [5.18, 2.6888]]
            data: getdata()
        }]
    });
});
function getdata(){
    var data = [];
    var x_get;
    var y_get;
    $.ajax({
        url:"11.txt",//发送请求
        type:"post",
        dataType:"json",//自动会转换为json
        success:function(datax){
            x_get=datax;
            var size = datax.length;
        }
    });
    $.ajax({
        url:"22.txt",//发送请求
        type:"post",
        dataType:"json",//自动会转换为json
        success:function(datay){
            y_get=datay;
        }
    });
    for (i = 0; i < size; i++) {
        x = x_get.start_time;
        y = y_get.start_time;
        data.push({
            x,
            y
        });
        return data;
    }
}

</script>
</body>
</html>


本帖被以下淘专辑推荐:

  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22711

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2017-3-26 21:29:48 | 显示全部楼层
    参考下面的写法:
    1. // 图表配置对象
    2. var options = {
    3.   series: [{
    4.     name: 'Location',
    5.     color: 'rgba(  0,  0,255, .5)',
    6.     //data: [[1.24, 2.69], [4.58, 5.09], [1.58, 4.28], [3.088, 5.0888], [5.18, 2.6888]]
    7.   }]
    8. };


    9. $.ajax({
    10.   url: "22.txt",
    11.   // 假设 22.txt 的内容为 [[1.24, 2.69], [4.58, 5.09], [1.58, 4.28], [3.088, 5.0888], [5.18, 2.6888]]
    12.   type: "post",
    13.   dataType: "json", //自动会转换为json
    14.   success: function(data) {
    15.     if (typeof data === 'string') { // 判断是否为字符串内容,如果是,则转换成 JSON
    16.       data = JSON.parse(data);
    17.     }

    18.     // 将数据赋值给数据列
    19.     options.series[0].data = data;

    20.     // 初始化图表
    21.     var chart = new Highcharts.Chart('container', options);
    22.   }
    23. });
    复制代码

    具体请参考教程:https://www.hcharts.cn/docs/ajax#h2-1

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

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

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