Question

我发现nvd3.js中的多栏图需要以下JSON格式输入。

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

但是，我希望将标签与DateTimestamp一起使用。 '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标记。但是我无法找到为刻度标签进行相同转换的位置（'min x'和'max x'轴之间的标签本身显示长值）。

Answer 1

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

var chart = nv.models.multiBarChart();

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

在nvd3.js中的多栏图中编辑标签文本

1 个答案: