格式化 nvd3 折线图轴答案

【问题标题】：Formatting nvd3 line chart axis格式化 nvd3 折线图轴
【发布时间】：2016-03-23 09:53:35
【问题描述】：

我正在尝试修复使用 nvd3 (D3) 库完成的简单折线图，但似乎无法修复代码。

这里是小提琴：http://jsfiddle.net/sourabhtewari/o24ffe99/

数据是这样的

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": "2016-03-21T00:00:00",
      "y": 100.00
    }, {
      "x": "2016-03-22T00:00:00",
      "y": 99.00
    }]
  }];

所有的代码都是这样的

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .margin({
      left: 100
    }) //Adjust chart margins to give the x-axis some breathing room.
    .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
    .transitionDuration(350) //how fast do you want the lines to transition?
    .showLegend(true) //Show the legend, allowing users to turn on/off line series.
    .showYAxis(true) //Show the y-axis
    .showXAxis(true) //Show the x-axis
  ;

  chart.xAxis //Chart x-axis settings
    .axisLabel('Date')
    .tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    });

  chart.yAxis //Chart y-axis settings
    .axisLabel('Consistancy')
    .tickFormat(d3.format('.02f'));

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": "2016-03-21T00:00:00",
      "y": 100.00
    }, {
      "x": "2016-03-22T00:00:00",
      "y": 99.00
    }]
  }];
  /* Done setting the chart up? Time to render it!*/

  d3.select('#chart svg') //Select the <svg> element you want to render the chart in.   
    .datum(reportData) //Populate the <svg> element with chart data...
    .call(chart); //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() {
    chart.update()
  });
  return chart;
});

我无法正确绘制图表。我对d3没有足够的经验。如果有人可以帮我解决这个问题。我将不胜感激。

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

在reportData 中使用Date 对象而不是字符串：

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": new Date("2016-03-21T00:00:00"),
      "y": 100.00
    }, {
      "x": new Date("2016-03-22T00:00:00"),
      "y": 99.00
    }]
  }];

此外，您还可以根据您的数据设置tickValues：

var tickValues = reportData[0].values.map(function(p) { return p.x});
chart.xAxis.tickValues(tickValues);

工作示例：http://jsfiddle.net/LukaszWiktor/rcL0uot9/

结果：

【讨论】：

【解决方案2】：

Read Time formating of d3js

你缺少 parseDate 函数

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse

parseDate 函数接受一个字符串并将字符串转换为 Date 对象。

所以您的数据应该如下所示。

var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": parseDate("2016-03-21T00:00:00"),
      "y": 100.00
    }, {
      "x": parseDate("2016-03-22T00:00:00"),
      "y": 99.00
    }]
}];

【讨论】：