7

我正在研究 HighCharts Spline 不规则数据。这里的数据被传递为

data: [
      [Date.UTC(1970,  9, 27), 0   ],
      [Date.UTC(1970, 10, 10), 0.6 ],
      [Date.UTC(1970, 10, 18), 0.7 ],
      [Date.UTC(1970, 11,  2), 0.8 ],
      [Date.UTC(1970, 11,  9), 0.6 ],
      [Date.UTC(1970, 11, 16), 0.6 ],
      ]

但是，我通过 AJAX 调用从 python 后端发送数据

data: [
      "2013-11-07 00:10:27", 0   ],
      "2013-11-07 00:10:27", 1   ],
      "2013-11-07 00:10:27", 2   ],
      "2013-11-07 00:10:27", 3   ],
      "2013-11-07 00:10:27", 4   ],
      "2013-11-07 00:10:27", 5   ],
      ]

因此，不会绘制数据点。如何在后端（python）将日期时间转换为 UTC 或任何其他格式的日期时间，这将使 Highcharts 能够绘制正确的 X 和 Y 轴点。？

这是我尝试过的。由于 UTC 时间Date.UTC(1970, 9, 27)返回秒数，因此我将时间转换为自 1970 年 1 月 1 日以来经过的总秒数。

time = "2013-11-06 18:00:00"
time = ((datetime.datetime.strptime(time, '%Y-%m-%d %H:%M:%S'))-datetime.datetime(1970,1,1)).total_seconds()

然后将其传递给 UI。因此我的数据被发送为

[[1383760800.0, 1870.2000000000007], [1383762600.0, 0.30000000000000004], [1383761700.0, 4.299999999999802]]

现在，当我将这些数据传递给 highcharts 时，Y 轴显示正确的值，但 X 轴（需要在其上绘制日期时间）显示时间为 05:52。

我该如何纠正？

这是我的 Highcharts 代码。

function comparison_chart(result) {
  var MAXPOINTS = 20;

  Highcharts.setOptions({
      global: {
          useUTC: false,
      }
  });

$('#container').highcharts({
    chart: {
      events: {
      load: function() {

          // set up the updating of the chart each second
          var series = this.series[0];


          setInterval(function() {
              var x = (new Date()).getTime(), // current time
                  y = Math.random();
              if(series.data.length > MAXPOINTS){
                series.addPoint([x, y], true, true);  
              }
              else{
                series.addPoint([x, y], true, false);
              }



          },5000);
      },
  }

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

    tooltip: {
        formatter: function() {
            var s;
                s = this.y + 'kWh';
            return s;
        }
    },

    series: [{
        type: 'spline',
        name: 'Random data',
        data: result,
        showInLegend: true,

    }]
  });
}
4

1 回答 1

15

问题是 HighCharts 期望时间序列数据以毫秒为单位，而不是秒，因此您需要输入 1000 的乘数。

您可以从您的字符串转换为自纪元以来的毫秒数，如下所示：

>>> int(datetime.datetime.strptime("2013-11-07 00:10:27", "%Y-%m-%d %H:%M:%S").strftime('%s')) * 1000
1383811827000
于 2013-11-07T05:03:22.377 回答