NVD3时间格式化，与焦点图一致

问题描述

我使用一个非常简单的nvd3行示例与焦点图。 myData 从我的php文件返回一个JSON对象，其中x-cordinates是从0-23的数字。我想知道如何格式化x轴以小时格式。

  d3.json（'get_data.php'，function（error，myData）{
 //呈现一行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）; //定义转换并将d3.selection传递给我们的lineChart。
 
 
 nv.utils.windowResize（chart.update）; 
 
 return chart; //必须返回所包含的图表变量，以便全局渲染队列可以存储它）
 //}）; 
}）; 
}）（）; }）; 
 

下面是 myData 。我需要以反正的方式操作它吗？

[{
key：data，
values ：[
{
x：0，
y：408175
}，
{
x：1，
y：428739
}，
{
x：2，
y：422141
}，
{
x：3，
y：439864
}，
{
x：4，
y：441409
}
]
}]
任何帮助。

解决方案

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（）;}]，//不是小时的开始
[％-I％p，function（d）{return d.getHours（）;}]，// not midnight
[％b％-d，function（d）{return d .getDate（）！= 1;}]，//不是月份的第一个
[％b％-d，function（d）{return d.getMonth（）;}]，// not Jan 1st
[％Y，function（）{return true;}]
]）;

chart.xAxis.tickFormat（function（d）{return tickMultiFormat（new Date（d））;}）;

I'm using a fairly simple example of nvd3 line with focus chart. myData returns a JSON object from my php file of which the x-cordinates are numbers from 0-23. I would like to know how to format the x-axis in hours format.

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

Here is the sample json data in myData. Do I need to manipulate it in anyway?

[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }]Any help is appreciated.

解决方案

After a lot of searching got it to work with this code.

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

这篇关于NVD3时间格式化，与焦点图一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！