橙稚 2017-06-01 01:05 采纳率: 33.3%
浏览 2419
已采纳

highcharts横坐标为时间,怎么跟数据点一一对应

图片说明

这是我要返回给highcharts的数据,日期为X轴。name和pjcj为数据点。我应该怎么写?

  • 写回答

2条回答 默认 最新

  • tets_java 2017-06-01 01:34
    关注

    你是要时间为横坐标,name为highcharts里series节电里的name ,pjcj为date数据数组是吧。
    可以这样
    1、 组建x轴数据,将其封装成list数组; 根据查询条件构造 比如你查询的是最近三年 那就是一个list["2015","2016",2017].
    2、构建series里的name集合,封装成set; 后台查询到结果集后,循环结果集,将结果集的name向set里add,即 set.add(name).
    3、组织拼接数据源,声明一个map ,map.put(日期+"_"+name,pjcj);
    4、将x轴数据放入声明的map中 map.put("xData",list); 将name集合放入map中 map.put("name",set); 然后将数据返回前台
    5、前台数据接收 x轴list 对应 highcharts 里xAxis 节点的categories 属性;
    set对应series 里的 name属性
    series节点数据拼接
    首先循环list 再循环set 然后取数据 代码如下
    var series= [];
    for(var i=0;i<set.length;i++){
    var data = [];
    for(var j=0;j<list.length;j++){
    if(map[list[j]+"_"+set[i]]!=undefined){//map 后台传输到前台的map
    data.push(map[list[j]+"_"+set[i]]);
    }else{
    data.push(0);
    }
    }
    var serie ={
    name:set[i],
    data:data
    }
    series.push(serie);
    }
    则 构建的series 就为 highcharts里的series 节点 ,

        6、highcharts赋值:
                        var chart = new Highcharts.Chart('container', {
    title: {
        text: '不同城市的月平均气温',
        x: -20
    },
    subtitle: {
        text: '数据来源: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: list
    },
    yAxis: {
        title: {
            text: '温度 (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: series
    

    });

    望采纳

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 visionmaster启动失败,提示为“机器不满足授权而被禁用”
  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码