使用Ajax绘制Highcharts



这是我的AJAX请求,以获取数据,然后致电函数以将数据传递到图。

function getGraphs(){
 $.ajax({
    type : "POST",
    async: true,
    url : "<?php echo base_url(); ?>" + "Graphs/get_graphs",
    dataType: 'json',
    data :{hotel_name_realm:$("#hotel_names").val()},
    success : function(res){
     obj = JSON.parse(res);
     plot_graph(obj);
        // console.log(obj.upload);
      }
    });
}

这是Highchart图形绘图函数。AJAX成功函数调用此功能传递数据。当加载了S.Download和ss.upload图时,我可以访问此数据对象,但没有显示数据。

函数plot_graph(ss({

 Highcharts.chart('container', {
        chart: {
        type: 'spline',
        scrollablePlotArea: {
        minWidth: 600,
        scrollPositionX: 1
    }
  },
title: {
    text: 'Wind speed during two days',
    align: 'left'
  },
  subtitle: {
    text: '13th & 14th of February, 2018 at two locations in Vik i Sogn, Norway',
    align: 'left'
  },
  xAxis: {
    type: 'datetime',
    labels: {
      overflow: 'justify'
    }
  },    
  tooltip: {
    valueSuffix: ' m/s'
  },
  plotOptions: {  
    spline: {
      lineWidth: 4,
      states: {
        hover: {
          lineWidth: 5
        }
      },
      marker: {        
        enabled: false
      },    
              pointInterval: 60000, // one hour
              pointStart: Date.UTC(2019, 4, 9, 14, 35, 0)
            }
          },
          series: [{
            name: 'Download',
            data: [
            ss.download
            ]
          }, {
            name: 'Upload',
            data: [
            ss.upload
            ]
          }],
          navigation: {
            menuItemStyle: {
              fontSize: '10px'
            }
          }
        });    
}

如果您的ss,downloadss.upload数据看起来像这样:

ss.download = [
  [Date.UTC(2019, 4, 9, 14, 35, 0), 20.9],
  [Date.UTC(2019, 4, 9, 15, 01, 0), 50.5],
  [Date.UTC(2019, 4, 9, 16, 55, 0), 80.4]
];
ss.upload = [
  [Date.UTC(2019, 4, 9, 14, 35, 0), 29.9],
  [Date.UTC(2019, 4, 9, 15, 01, 0), 71.5],
  [Date.UTC(2019, 4, 9, 16, 55, 0), 106.4]
];

然后,我认为您只需要删除它们周围的括号:

  series: [{
    name: 'Download',
    data: ss.download
    }, {
    name: 'Upload',
    data: ss.upload    
  }]

示例

最新更新