Question

我在下面的代码中提到了创建堆积面积图。 HTML：

<style>

#chart svg {
  height: 400px;
}

</style>
<div id="chart">
  <svg></svg>
</div>

使用Javascript：

nv.addGraph(function() {
  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .clipEdge(true)
                .useInteractiveGuideline(true)
                ;

  chart.xAxis
      .showMaxMin(false)
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

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

  nv.utils.windowResize(chart.update);

  return chart;
});

JSON数据

[ 
        { 
          "key" : "Test" , 
          "values" : [
            [ 1025409600000 , 23.041422681023] , 
            [ 1028088000000 , 19.854291255832] 
            ]
        },
  ]

但是我想把日期换成字符串格式而不是毫秒。

[ 
        { 
          "key" : "Test" , 
          "values" : [
            [ "2016-11-25", 23.041422681023] , 
            [ "2016-11-26", 19.854291255832] 
            ]
        },
]

如何将此json格式作为区域图的输入提供。如果我将其应用为其javascript抛出无效数字错误。有什么帮助吗？

Answer 1

以下是可用于解决问题的解决方案

在传递到图表
按原样传递数据，但为x轴值编写解析函数

var chart = nv.models.stackedAreaChart（） .x（function（d）{return（（new Date（d [0]））。getTime（））}）

注意：chart.xAxis.tickFormat()用于根据用于绘制图表的值生成标签。

Answer 2

试试看！我知道这个问题现在已经很老了，但是希望这对将来有帮助。

var chart = nv.models.stackedAreaChart()
              .x(function(d) { return Number(new Date(d[0])) })

字符串格式化日期为堆积面积图中的X轴

2 个答案: