nvd3图表的csv输入显示错误(与时间格式有关）

Wrong display of csv input to nvd3 chart (related to timeformatting)

本文关键字：时间 格式 错误 csv 显示 输入 nvd3      更新时间：2023-09-26

我遇到一个问题，我试图显示一天的平均值；小时、分钟(%H:%M(，但图表无法正确解释数据并切换时间，23:30出现在00:00之后，造成混乱的显示。

我认为这个问题与如何格式化时间有关，但不确定如何格式化。有人能认出出了什么问题吗？任何提示都将不胜感激！

代码

<script>
d3.csv("17_predicted_hourly_holiday.csv", function(error, data) {
  data.sort(function(a, b) {
    return a.length - b.length;
  });
  var exampleData = Object.keys(data[0]).filter(function(k) {
    return k != 'length'
  })
    .map(function(k) {
      return {
        'key': k,
        'values': data.map(function(d) {
          return [
            d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + d.length),
            //d3.time.format('%Y-%b-%d' + '%H:%M:%S').parse("2000-01-01" + d.length + ':00')
            +d[k]
          ]
        })
      }
    });
  //alert(JSON.stringify(exampleData));
  console.log(exampleData);
  //console.log(data);
  var colors = d3.scale.category20();
  keyColor = function(d, i) {
    return colors(d.key)
  };
  var chart;
  nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
      .x(function(d) {
        return d[0]
      })
      .y(function(d) {
        return d[1]
      })
      .color(keyColor)
      .clipEdge(true);
    chart.xAxis
      .tickFormat(function(d) {
        return d3.time.format('%H:%M')(new Date(d));
      });
    chart.yAxis
      .tickFormat(d3.format(',.2f'));
    d3.select('#chart')
      .datum(exampleData)
      .transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) {
      nv.log('New State:', JSON.stringify(e));
    });
    return chart;
  });
  // end read csv
});

Plunker

http://plnkr.co/edit/GYI8oq?p=info

问题图片：https://i.stack.imgur.com/NXStQ.png

问题是，在排序函数中，您假设length是一个数字，但事实并非如此。在您的情况下，您甚至不需要排序，因为数据是经过排序的。这里的工作示例。

或者，您可以使用一个随时间变化的排序函数：

data.sort(function(a, b) {
    return d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + a.length) - d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + b.length);
  });

在此处完成演示。

一般来说，不要使用length作为属性名称——它与在Javascript中提供数组长度的.length相冲突，迟早会引起问题。

相关文章：