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

上面是我的图表，我通过它的值为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]]
}];

与以下（）对应：

如何将图表上日期的格式从显示

9/30/2015

改为显示

9:00

我在他们的文档中找不到任何关于时间或时间跨度的内容

指令的完整代码：

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;
});

// 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))
    });
    ....

刚发现这个问题

这帮我找到了：

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

从我的

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;
    }
}

现在回到我的指令：

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;
});

// 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))
    });
    ....

刚发现这个问题

这帮我找到了：

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

从我的

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;
    }
}

现在回到我的指令：

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;
});

// 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))
    });
    ....

你可以用

d3.time.format('%H') 

而不是

d3.time.format('%x') 

因为

%x-日期，作为“%m/%d/%Y”

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

来源：

您可以使用

d3.time.format('%H') 

而不是

d3.time.format('%x') 

因为

%x-日期，作为“%m/%d/%Y”

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

---

来源：

你的日期是什么格式的？你的日期是什么格式的？