Question

我正在尝试使用nvd3在angularjs中显示条形图，使x轴显示日期，y轴显示时间。我尝试过以下方法：

 $scope.options1 = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },
      x: function(d) {
        return d.date;
      },
      y: function(d) {
        return d.hour;
      },
      showValues: true,
      duration: 500,
      xAxis: {
        axisLabel: 'Date',
        tickFormat: function(d) {
          return d3.time.format('%d-%m-%y')(new Date(d));
        }
      },
      yAxis: {
        axisLabel: 'Time of Day',
        axisLabelDistance: -10,
        tickFormat: function(d) {
          return d3.time.format("%H%p")(new Date(d));
        }
      }
    }
  };

  $scope.data1 = [{
    key: "Cumulative Return",
    values: [{
      "date": "01-Jun-16",
      "hour": "9AM"
    }, {
      "date": "04-Jun-16",
      "hour": "10AM"
    }, {
      "date": "02-Jun-16",
      "hour": "2PM"
    }, {
      "date": "03-Jun-16",
      "hour": "4PM"
    }]
  }]

我的问题是代码显示NaN而不是任何值（所以我想我正在以错误的方式解析值，但找不到更好的解决方案）知道这里可能有什么问题吗？

Answer 1

这不是我想要的，但我设法通过将小时数转换为0-24整数来解决它

  x: function(d) {
        return d3.time.format('%d-%m-%y')(new Date(d.date));
      },
      y: function(d) {
        var timeParser = d3.time.format("%I%p");
        var time = new Date(timeParser.parse(d.hour));
        var hour = time.getHours();
        return hour;
      },

NVD3 - 时间格式

1 个答案: