3

我观察到 multibarchart innvd3.js需要以下 JSON 格式输入。

[
  {
    "key": "abcd",
    "values": [
      {
        "x": 1221578789000,
        "y": 40
      },
      {
        "x": 1222578789000,
        "y": 103
      },
      {
        "x":1224181799000,
        "y": 35
      }
    ]
  }
]

但是，我想有带有 DateTimestamp 的 x 标签。'x' 是否必须只有 int/long 数据类型？

话虽如此，我尝试在代码中将长数据类型转换为日期时间戳nvd3.js。

nv.models.axis = function() {    
  {code block}
  switch (axis.orient()) {
    case 'bottom':
      {code block}
      if (showMaxMin) {
      //if (showMaxMin && !isOrdinal) {
        var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
            //.data(scale.domain())
            .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
        axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text');
        axisMaxMin.exit().remove();
        axisMaxMin.attr('transform', function(d,i) {
            return 'translate(' + (scale(d) +
                    (isOrdinal ? scale.rangeBand() / 2 : 0)) + ',0)'
          })
          .select('text')
          .attr('dy', '.71em')
          .attr('y', axis.tickPadding())
          .attr('transform', function(d,i,j) {
             return 'rotate('+ rotateLabels + ' 40,60)'
          })
          .attr('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ?
                                               'start' : 'end') : 'middle')
          .text(function(d,i) {
            **var dat = new Date(d);**                  
            **return dat.toUTCString();**
            //return v;
          });

          d3.transition(axisMaxMin)
            .attr('transform', function(d,i) {
              //return 'translate(' + scale.range()[i] + ',0)'
              //return 'translate(' + scale(d) + ',0)'
              return 'translate(' + (scale(d) + (isOrdinal ?
                                scale.rangeBand() / 2 : 0)) + ',0)'
          });
      }
   }
}

通过这种更改，我能够将 MaxMin 'x labels' 转换为 Datetime stamp。但我无法找到对刻度标签进行相同转换的位置（'min x' 和 'max x' 轴之间的标签显示长值本身）。

4

1 回答 1

4

在图表对象中进行必要的更改解决了这个问题。

var chart = nv.models.multiBarChart();

chart.xAxis
    .showMaxMin(true)
    .rotateLabels(440)
    .tickFormat(function(d) {
                     return d3.time.format('%x')(new Date(d))
                   });
于 2012-12-19T06:23:23.060 回答