Question

尝试将数据推送到折线图，但看不到任何线条。什么是这里错了吗？

数据看起来像这样

[{"ev_id":null,"id":0,"name":"car","dwell_time":null,"no_visitor":3,"total_visitor":0,"timestamp":"/Date(1500699656000)/"},{"ev_id":null,"id":0,"name":"car","dwell_time":null,"no_visitor":2,"total_visitor":0,"timestamp":"/Date(1500526919000)/"},{"ev_id":null,"id":0,"name":"car","dwell_time":null,"no_visitor":6,"total_visitor":0,"timestamp":"/Date(1500526966000)/"},{"ev_id":null,"id":0,"name":"car","dwell_time":null,"no_visitor":1,"total_visitor":0,"timestamp":"/Date(1500527026000)/"}],[{"ev_id":null,"id":0,"name":"football","dwell_time":null,"no_visitor":11,"total_visitor":0,"timestamp":"/Date(1500534046000)/"},{"ev_id":null,"id":0,"name":"football","dwell_time":null,"no_visitor":1,"total_visitor":0,"timestamp":"/Date(1500526906000)/"},{"ev_id":null,"id":0,"name":"football","dwell_time":null,"no_visitor":4,"total_visitor":0,"timestamp":"/Date(1500526966000)/"},{"ev_id":null,"id":0,"name":"football","dwell_time":null,"no_visitor":10,"total_visitor":0,"timestamp":"/Date(1500530626000)/"}]]

20170807235208：446 [[“car”，“＃058DC7”，[3,2,6,1]]，[“football”，“＃50B432”，[11,1,4,10]] < / p>

这是折线图代码

  function temp(data) {

    var my_data = [];
    var colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']

    $.each(data, function (i, value) {
        var key = "";
        var temp = [];
        var color = colors[i];
        $.each(value, function (index, values) {
            temp.push(values.no_visitor);
            key = values.name;
        })

        my_data.push([key, color, temp])

    });

    console.log(JSON.stringify(my_data));
   // log data sample is mentioned in question details above

      var chart =   new Highcharts.chart('container1', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'my chart'
            },
            subtitle: {
                text: 'visitors'
            },

            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: my_data
            });
    }

请解释一下这个问题，以免下次发生注意：这是使用HighCharts

图表需要看起来像这样

Answer 1

您的服务器数据仍有问题。最好以升序时间间隔从服务器获取数据。

用于形成series数据

$.each(data, function(i, value) {
  var key = "";
  var temp = [];
  var color = colors[i];
  $.each(value, function(index, values) {
    temp.push({
      x: Number(values.timestamp),
      y: values.no_visitor
    });
    key = values.name;
  })
  /*sorting based on time ascending*/
  temp = temp.sort(function(a, b) {
    return (a.x) - (b.x)
  });
  my_data.push({
    name: key,
    color: color,
    data: temp
  })

});

用于在xAxis中显示日期：

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
    }

  }

Fiddle根据您的数据

将数据推送到折线图

1 个答案: