NVD3时间格式,与焦点图一致

阿克沙耶·M·盖卡

我使用的是带有焦点图的nvd3线的一个非常简单的示例。myData从我的php文件返回一个JSON对象,其x坐标是0-23之间的数字。我想知道如何以小时格式设置x轴的格式。

 d3.json('get_data.php', function (error, myData) {
  // Renders a line chart
  (function () {
      nv.addGraph(function () {  
          var chart = nv.models.lineWithFocusChart();
          chart.xAxis                
            .tickFormat(d3.format(''));
          chart.yAxis
            .tickFormat(d3.format(''));
          chart.y2Axis
            .tickFormat(d3.format(''));

          d3.select("#chart svg")               
              .datum(myData)
              .transition().duration(500)
              .call(chart);    //Define transition and pass the d3.selection to our lineChart.


          nv.utils.windowResize(chart.update);

          return chart;   //Must return the enclosed chart variable so the global rendering queue can store it.
          //});
      });
  })();  });

这是中的示例json数据myData无论如何我都需要操纵它吗?

[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }] 任何帮助表示赞赏。

阿克沙耶·M·盖卡

经过大量搜索后,它可以与此代码一起使用。

chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());

var tickMultiFormat = d3.time.format.multi([ ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour ["%-I%p", function(d) { return d.getHours(); }], // not midnight ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st ["%Y", function() { return true; }] ]);

chart.xAxis.tickFormat(function (d) { return tickMultiFormat(new Date(d)); });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章