如何将时间范围转换为以小时而不是日期显示？（nvd3图）

Question

http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview

上面是我的图表，我传递给它的值是 1 天，30 分钟间隔：

var data =[{
  "key" : "Price",
  "color" : "#4C73FF",
  "values" : [ [ 1443621600000 , 71.89],
               [ 1443619800000 , 75.51],
               [ 1443618000000 , 68.49],
               [ 1443616200000 , 62.72],
               [ 1443612600000 , 70.39],
               [ 1443610800000 , 59.77]]
}];

对应以下(Epoch Converter):

9/30/2015, 9:00:00 AM GMT-5:00 DST
9/30/2015, 8:30:00 AM GMT-5:00 DST
9/30/2015, 8:00:00 AM GMT-5:00 DST
9/30/2015, 7:30:00 AM GMT-5:00 DST
9/30/2015, 6:30:00 AM GMT-5:00 DST
9/30/2015, 6:00:00 AM GMT-5:00 DST

如何将图表上的日期格式从显示 9/30/2015 更改为显示 9:00？

我在他们的文档中找不到任何关于时间或时间跨度的内容 http://nvd3-community.github.io/nvd3/examples/documentation.html#line

指令的完整代码：

var data =[{
  "key" : "Price",
  "color" : "#4C73FF",
  "values" : [ [ 1443621600000 , 71.89],
               [ 1443619800000 , 75.51],
               [ 1443618000000 , 68.49],
               [ 1443616200000 , 62.72],
               [ 1443612600000 , 70.39],
               [ 1443610800000 , 59.77]]
}];

nv.addGraph(function() {
  var chart = nv.models.linePlusBarChart()
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .x(function(d,i) { return i })
    .y(function(d) { return d[1] })
    .color(d3.scale.category10().range());

  chart.xAxis
    .showMaxMin(false)
    .tickFormat(function(d) {
      var dx = data[0].values[d] && data[0].values[d][0] || 0;
      return d3.time.format('%x')(new Date(dx))
    });

  chart.y1Axis
    .tickFormat(d3.format(',f'));

  chart.y2Axis
    .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

  chart.bars.forceY([0]);

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

Answer 1

刚刚发现这个问题Understanding nvd3 x-axis date format

这帮助我找到了这个：https://github.com/mbostock/d3/wiki/Time-Formatting

我现在可以更正更改时间了：

来自我的 timerangeConvertFactory 我刚刚做的服务

function convertTime(when) {
    switch(when) {
        case 'lh':
        case 'ld':
            return '%I:%M';
            break;
        case 'lw':
        case '1mo':
        case '3mo':
            return '%x';
            break;
        case '1yr':
        case '2yr':
        case 'max':
            return '%m:%y';
            break;
    }
}

现在回到我的指令中：

// Get timespan:
var timeRange = TimeSpanFactory.getTimeSpan();
console.log('timeRange =',timeRange.when);

// Convert timespan to nvd3 format:
var nvd3timeRange = TimespanConvertFactory.convertTime(timeRange.when);
console.log('nvd3timeRange =',nvd3timeRange);

nv.addGraph(function() {
    var chart = nv.models.linePlusBarChart()
        .margin({top: 20, right: 40, bottom: 50, left: 40})
        .x(function(d,i) { return i })
        .y(function(d) { return d[1] })
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
        var dx = res[0].values[d] && res[0].values[d][0] || 0;
        return d3.time.format(nvd3timeRange)(new Date(dx))
        // return d3.time.format('%I:%M')(new Date(dx))
        // return d3.time.format('%x')(new Date(dx))
    });
    ....

Answer 2

您可以使用

d3.time.format('%H')

而不是

d3.time.format('%x')

因为

%x - date, as "%m/%d/%Y"

在这里您可以找到所有 D3 时间格式的来源

来源：github

如何将时间范围转换为以小时而不是日期显示？（nvd3图）

How to convert time range to display in hours not date? (nvd3 chart)

javascript

charts

angularjs

nvd3.js

如何将时间范围转换为以小时而不是日期显示？ （nvd3图）

How to convert time range to display in hours not date? (nvd3 chart)

javascript

charts

angularjs

nvd3.js

如何将时间范围转换为以小时而不是日期显示？（nvd3图）