正确的人力车日期格式
Correct date format for Rickshaw
我正在使用 Rickshaw 构建一个折线图来显示不同时间的速度。
我的数据如下：
[{"x":1484124298856,"y":10},{"x":1484124300949,"y":10},{"x":1484124303142,"y":6},{"x":1484124305543,"y":7},{"x":1484124308544,"y":11},{"x":1484124310415,"y":8},{"x":1484124312038,"y":6},{"x":1484124313609,"y":10},{"x":1484124315152,"y":9},{"x":1484124316804,"y":4},{"x":1484124318638,"y":4},{"x":1484124320577,"y":8},{"x":1484124323127,"y":11},{"x":1484124325787,"y":3},{"x":1484124332703,"y":7},{"x":1484124340367,"y":2},{"x":1484124343787,"y":6},{"x":1484124348003,"y":9},{"x":1484124358932,"y":1},{"x":1484124363545,"y":9},{"x":1484124365670,"y":4},{"x":1484124367744,"y":6},{"x":1484124370212,"y":8},{"x":1484124372633,"y":2},{"x":1484124374960,"y":10},{"x":1484124377234,"y":9},{"x":1484124379623,"y":5},{"x":1484124382105,"y":4},{"x":1484124384763,"y":7},{"x":1484124387649,"y":5},{"x":1484124389965,"y":4},{"x":1484124391586,"y":3},{"x":1484124393010,"y":8},{"x":1484124394309,"y":10},{"x":1484124395588,"y":9},{"x":1484124396844,"y":10},{"x":1484124398047,"y":2},{"x":1484124399222,"y":1},{"x":1484124400324,"y":10},{"x":1484124401497,"y":4},{"x":1484124402787,"y":6},{"x":1484124405196,"y":2},{"x":1484124407560,"y":11},{"x":1484124409613,"y":2},{"x":1484124411312,"y":3},{"x":1484124412982,"y":3},{"x":1484124414386,"y":8},{"x":1484124415735,"y":6},{"x":1484124417047,"y":4},{"x":1484124418433,"y":8},{"x":1484124420174,"y":4},{"x":1484124423064,"y":5},{"x":1484124425978,"y":1},{"x":1484124428110,"y":9},{"x":1484124429807,"y":5},{"x":1484124431495,"y":9},{"x":1484124433077,"y":2},{"x":1484124434563,"y":1},{"x":1484124435975,"y":6},{"x":1484124437624,"y":6},{"x":1484124440760,"y":4},{"x":1484124444016,"y":6},{"x":1484124446655,"y":10},{"x":1484124448596,"y":2},{"x":1484124450839,"y":7},{"x":1484124452820,"y":6},{"x":1484124454660,"y":6},{"x":1484124456322,"y":10},{"x":1484124457993,"y":11},{"x":1484124459839,"y":5},{"x":1484124462118,"y":9},{"x":1484124464724,"y":6},{"x":1484124467396,"y":7},{"x":1484124470081,"y":3},{"x":1484124475097,"y":10},{"x":1484124484548,"y":2},{"x":1484124498625,"y":10},{"x":1484124526543,"y":2},{"x":1484124531178,"y":6},{"x":1484124536233,"y":11},{"x":1484124571541,"y":1},{"x":1484124595464,"y":7}]
其中 X 是时间（以 Unix 秒为单位），Y 是速度（以 MPH 为单位）。
我的X轴和Y轴如下：
var x_ticks = new Rickshaw.Graph.Axis.Time({
graph: graph,
orientation: 'bottom',
timeFixture: new Rickshaw.Fixtures.Time.Local()
element: document.getElementById('x_axis')
});
var y_ticks = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis')
});
主图：
var graph = new Rickshaw.Graph({
element: document.getElementById("speedGraph"),
renderer: 'line',
width: $('#speedGraph').width(),
height: $('#speedGraph').height(),
series: [
{
data: data,
color: "#c05020"
}
]
});
graph.render();
但是我在 X 轴上看到的日期不正确。例如上面的数据都是在 2016 年 1 月 11 日，但在不同的时间。然而，我在图表上看到的标签如下：
根据文档，Rickshaw 期望日期采用 Unix 时间戳，因此应该很好地理解数据。
1。为什么标签显示错误的日期？
2。如何将轴上的标签显示为时间？例如：9:00、10:00、11:00 等
这不仅仅是标签上的格式问题。人力车读错了时间戳！
1。
X (13 位) 不是 UNIX time-stamp (10 位)。根据您的数据，X 是 ZERO-DAY 天的总毫秒数，time-stamp 是 ZERO-DAY.
的总秒数
所以必须转换成有效的time-stamp.
data.forEach(function (element) { element.x = Math.floor(element.x / 1000); });
2。
您可以使用 predefined configuration or write your custom. When timeUnit is not specified, the framework detects and sets a suitable unit.
/* Using a predefined time unit formatting for x-axis ... */
var xAxisUnit = new Rickshaw.Fixtures.Time().unit('minute');
/* Custom time unit formatting for x-axis ... */
var xAxisUnit = {
name: 'custom',
seconds: 30,
formatter: function (d) {
return d.getUTCMinutes() + 'm :' + d.getUTCSeconds() + 's';
}
}
new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local(),
timeUnit: xAxisUnit
});
我已经编辑了 rickshaw example 以满足您的要求：
var data = [{ "x": 1484124298856, "y": 10 }, { "x": 1484124300949, "y": 10 }, { "x": 1484124303142, "y": 6 }, { "x": 1484124305543, "y": 7 }, { "x": 1484124308544, "y": 11 }, { "x": 1484124310415, "y": 8 }, { "x": 1484124312038, "y": 6 }, { "x": 1484124313609, "y": 10 }, { "x": 1484124315152, "y": 9 }, { "x": 1484124316804, "y": 4 }, { "x": 1484124318638, "y": 4 }, { "x": 1484124320577, "y": 8 }, { "x": 1484124323127, "y": 11 }, { "x": 1484124325787, "y": 3 }, { "x": 1484124332703, "y": 7 }, { "x": 1484124340367, "y": 2 }, { "x": 1484124343787, "y": 6 }, { "x": 1484124348003, "y": 9 }, { "x": 1484124358932, "y": 1 }, { "x": 1484124363545, "y": 9 }, { "x": 1484124365670, "y": 4 }, { "x": 1484124367744, "y": 6 }, { "x": 1484124370212, "y": 8 }, { "x": 1484124372633, "y": 2 }, { "x": 1484124374960, "y": 10 }, { "x": 1484124377234, "y": 9 }, { "x": 1484124379623, "y": 5 }, { "x": 1484124382105, "y": 4 }, { "x": 1484124384763, "y": 7 }, { "x": 1484124387649, "y": 5 }, { "x": 1484124389965, "y": 4 }, { "x": 1484124391586, "y": 3 }, { "x": 1484124393010, "y": 8 }, { "x": 1484124394309, "y": 10 }, { "x": 1484124395588, "y": 9 }, { "x": 1484124396844, "y": 10 }, { "x": 1484124398047, "y": 2 }, { "x": 1484124399222, "y": 1 }, { "x": 1484124400324, "y": 10 }, { "x": 1484124401497, "y": 4 }, { "x": 1484124402787, "y": 6 }, { "x": 1484124405196, "y": 2 }, { "x": 1484124407560, "y": 11 }, { "x": 1484124409613, "y": 2 }, { "x": 1484124411312, "y": 3 }, { "x": 1484124412982, "y": 3 }, { "x": 1484124414386, "y": 8 }, { "x": 1484124415735, "y": 6 }, { "x": 1484124417047, "y": 4 }, { "x": 1484124418433, "y": 8 }, { "x": 1484124420174, "y": 4 }, { "x": 1484124423064, "y": 5 }, { "x": 1484124425978, "y": 1 }, { "x": 1484124428110, "y": 9 }, { "x": 1484124429807, "y": 5 }, { "x": 1484124431495, "y": 9 }, { "x": 1484124433077, "y": 2 }, { "x": 1484124434563, "y": 1 }, { "x": 1484124435975, "y": 6 }, { "x": 1484124437624, "y": 6 }, { "x": 1484124440760, "y": 4 }, { "x": 1484124444016, "y": 6 }, { "x": 1484124446655, "y": 10 }, { "x": 1484124448596, "y": 2 }, { "x": 1484124450839, "y": 7 }, { "x": 1484124452820, "y": 6 }, { "x": 1484124454660, "y": 6 }, { "x": 1484124456322, "y": 10 }, { "x": 1484124457993, "y": 11 }, { "x": 1484124459839, "y": 5 }, { "x": 1484124462118, "y": 9 }, { "x": 1484124464724, "y": 6 }, { "x": 1484124467396, "y": 7 }, { "x": 1484124470081, "y": 3 }, { "x": 1484124475097, "y": 10 }, { "x": 1484124484548, "y": 2 }, { "x": 1484124498625, "y": 10 }, { "x": 1484124526543, "y": 2 }, { "x": 1484124531178, "y": 6 }, { "x": 1484124536233, "y": 11 }, { "x": 1484124571541, "y": 1 }, { "x": 1484124595464, "y": 7 }];
/* converting to valid UNIX timestamp ...*/
data.forEach(function (element) { element.x = Math.floor(element.x / 1000); })
/* sorting in ASC to get MIN and MAX for Y-axis ... */
data.sort(function (a, b) { return a.y - b.y; });
/* creating a scale for Y-Axis with MIN and MAX of Y-Axis values ..*/
var scale = d3.scale.linear().domain([data[0].y, data[data.length - 1].y]).nice();
/* sorting data by X values in asending order.... */
data.sort(function (a, b) { return a.x - b.x; });
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
renderer: 'line',
series: [{
color: 'steelblue',
data: data,
name: 'Series A',
scale: scale
}]
});
/* Using a predefined time unit formatting for x-axis ... */
//var xAxisUnit = new Rickshaw.Fixtures.Time().unit('minute');
/* Custom time unit formatting for x-axis ... */
var xAxisUnit = {
name: 'custom',
seconds: 30,
formatter: function (d) {
/* formatting via minutes: seconds. NOTE UTC is being used, and those functions are from the default JS Date class .... */
return d.getUTCMinutes() + 'm :' + d.getUTCSeconds() + 's';
}
}
new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local(),
timeUnit: xAxisUnit
});
new Rickshaw.Graph.Axis.Y.Scaled({
element: document.getElementById('axis0'),
graph: graph,
scale: scale,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
new Rickshaw.Graph.HoverDetail({
graph: graph
});
graph.render();
#axis0 {
position: absolute;
height: 800px;
width: 40px;
}
#axis1 {
position: absolute;
left: 1050px;
height: 800px;
width: 40px;
}
#chart {
left: 50px;
width: 1000px;
position: absolute;
}
<link href="http://code.shutterstock.com/rickshaw/src/css/graph.css" rel="stylesheet"/>
<link href="http://code.shutterstock.com/rickshaw/src/css/detail.css" rel="stylesheet"/>
<link href="http://code.shutterstock.com/rickshaw/examples/css/lines.css" rel="stylesheet"/>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v3.js"></script>
<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>
<div id="axis0"></div>
<div id="chart"></div>
我正在使用 Rickshaw 构建一个折线图来显示不同时间的速度。
我的数据如下：
[{"x":1484124298856,"y":10},{"x":1484124300949,"y":10},{"x":1484124303142,"y":6},{"x":1484124305543,"y":7},{"x":1484124308544,"y":11},{"x":1484124310415,"y":8},{"x":1484124312038,"y":6},{"x":1484124313609,"y":10},{"x":1484124315152,"y":9},{"x":1484124316804,"y":4},{"x":1484124318638,"y":4},{"x":1484124320577,"y":8},{"x":1484124323127,"y":11},{"x":1484124325787,"y":3},{"x":1484124332703,"y":7},{"x":1484124340367,"y":2},{"x":1484124343787,"y":6},{"x":1484124348003,"y":9},{"x":1484124358932,"y":1},{"x":1484124363545,"y":9},{"x":1484124365670,"y":4},{"x":1484124367744,"y":6},{"x":1484124370212,"y":8},{"x":1484124372633,"y":2},{"x":1484124374960,"y":10},{"x":1484124377234,"y":9},{"x":1484124379623,"y":5},{"x":1484124382105,"y":4},{"x":1484124384763,"y":7},{"x":1484124387649,"y":5},{"x":1484124389965,"y":4},{"x":1484124391586,"y":3},{"x":1484124393010,"y":8},{"x":1484124394309,"y":10},{"x":1484124395588,"y":9},{"x":1484124396844,"y":10},{"x":1484124398047,"y":2},{"x":1484124399222,"y":1},{"x":1484124400324,"y":10},{"x":1484124401497,"y":4},{"x":1484124402787,"y":6},{"x":1484124405196,"y":2},{"x":1484124407560,"y":11},{"x":1484124409613,"y":2},{"x":1484124411312,"y":3},{"x":1484124412982,"y":3},{"x":1484124414386,"y":8},{"x":1484124415735,"y":6},{"x":1484124417047,"y":4},{"x":1484124418433,"y":8},{"x":1484124420174,"y":4},{"x":1484124423064,"y":5},{"x":1484124425978,"y":1},{"x":1484124428110,"y":9},{"x":1484124429807,"y":5},{"x":1484124431495,"y":9},{"x":1484124433077,"y":2},{"x":1484124434563,"y":1},{"x":1484124435975,"y":6},{"x":1484124437624,"y":6},{"x":1484124440760,"y":4},{"x":1484124444016,"y":6},{"x":1484124446655,"y":10},{"x":1484124448596,"y":2},{"x":1484124450839,"y":7},{"x":1484124452820,"y":6},{"x":1484124454660,"y":6},{"x":1484124456322,"y":10},{"x":1484124457993,"y":11},{"x":1484124459839,"y":5},{"x":1484124462118,"y":9},{"x":1484124464724,"y":6},{"x":1484124467396,"y":7},{"x":1484124470081,"y":3},{"x":1484124475097,"y":10},{"x":1484124484548,"y":2},{"x":1484124498625,"y":10},{"x":1484124526543,"y":2},{"x":1484124531178,"y":6},{"x":1484124536233,"y":11},{"x":1484124571541,"y":1},{"x":1484124595464,"y":7}]
其中 X 是时间（以 Unix 秒为单位），Y 是速度（以 MPH 为单位）。
我的X轴和Y轴如下：
var x_ticks = new Rickshaw.Graph.Axis.Time({
graph: graph,
orientation: 'bottom',
timeFixture: new Rickshaw.Fixtures.Time.Local()
element: document.getElementById('x_axis')
});
var y_ticks = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis')
});
主图：
var graph = new Rickshaw.Graph({
element: document.getElementById("speedGraph"),
renderer: 'line',
width: $('#speedGraph').width(),
height: $('#speedGraph').height(),
series: [
{
data: data,
color: "#c05020"
}
]
});
graph.render();
但是我在 X 轴上看到的日期不正确。例如上面的数据都是在 2016 年 1 月 11 日，但在不同的时间。然而，我在图表上看到的标签如下：
根据文档，Rickshaw 期望日期采用 Unix 时间戳，因此应该很好地理解数据。
1。为什么标签显示错误的日期？
2。如何将轴上的标签显示为时间？例如：9:00、10:00、11:00 等
这不仅仅是标签上的格式问题。人力车读错了时间戳！
1。
X (13 位) 不是 UNIX time-stamp (10 位)。根据您的数据，X 是 ZERO-DAY 天的总毫秒数，time-stamp 是 ZERO-DAY.
的总秒数
所以必须转换成有效的time-stamp.
data.forEach(function (element) { element.x = Math.floor(element.x / 1000); });
2。 您可以使用 predefined configuration or write your custom. When timeUnit is not specified, the framework detects and sets a suitable unit.
/* Using a predefined time unit formatting for x-axis ... */
var xAxisUnit = new Rickshaw.Fixtures.Time().unit('minute');
/* Custom time unit formatting for x-axis ... */
var xAxisUnit = {
name: 'custom',
seconds: 30,
formatter: function (d) {
return d.getUTCMinutes() + 'm :' + d.getUTCSeconds() + 's';
}
}
new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local(),
timeUnit: xAxisUnit
});
我已经编辑了 rickshaw example 以满足您的要求：
var data = [{ "x": 1484124298856, "y": 10 }, { "x": 1484124300949, "y": 10 }, { "x": 1484124303142, "y": 6 }, { "x": 1484124305543, "y": 7 }, { "x": 1484124308544, "y": 11 }, { "x": 1484124310415, "y": 8 }, { "x": 1484124312038, "y": 6 }, { "x": 1484124313609, "y": 10 }, { "x": 1484124315152, "y": 9 }, { "x": 1484124316804, "y": 4 }, { "x": 1484124318638, "y": 4 }, { "x": 1484124320577, "y": 8 }, { "x": 1484124323127, "y": 11 }, { "x": 1484124325787, "y": 3 }, { "x": 1484124332703, "y": 7 }, { "x": 1484124340367, "y": 2 }, { "x": 1484124343787, "y": 6 }, { "x": 1484124348003, "y": 9 }, { "x": 1484124358932, "y": 1 }, { "x": 1484124363545, "y": 9 }, { "x": 1484124365670, "y": 4 }, { "x": 1484124367744, "y": 6 }, { "x": 1484124370212, "y": 8 }, { "x": 1484124372633, "y": 2 }, { "x": 1484124374960, "y": 10 }, { "x": 1484124377234, "y": 9 }, { "x": 1484124379623, "y": 5 }, { "x": 1484124382105, "y": 4 }, { "x": 1484124384763, "y": 7 }, { "x": 1484124387649, "y": 5 }, { "x": 1484124389965, "y": 4 }, { "x": 1484124391586, "y": 3 }, { "x": 1484124393010, "y": 8 }, { "x": 1484124394309, "y": 10 }, { "x": 1484124395588, "y": 9 }, { "x": 1484124396844, "y": 10 }, { "x": 1484124398047, "y": 2 }, { "x": 1484124399222, "y": 1 }, { "x": 1484124400324, "y": 10 }, { "x": 1484124401497, "y": 4 }, { "x": 1484124402787, "y": 6 }, { "x": 1484124405196, "y": 2 }, { "x": 1484124407560, "y": 11 }, { "x": 1484124409613, "y": 2 }, { "x": 1484124411312, "y": 3 }, { "x": 1484124412982, "y": 3 }, { "x": 1484124414386, "y": 8 }, { "x": 1484124415735, "y": 6 }, { "x": 1484124417047, "y": 4 }, { "x": 1484124418433, "y": 8 }, { "x": 1484124420174, "y": 4 }, { "x": 1484124423064, "y": 5 }, { "x": 1484124425978, "y": 1 }, { "x": 1484124428110, "y": 9 }, { "x": 1484124429807, "y": 5 }, { "x": 1484124431495, "y": 9 }, { "x": 1484124433077, "y": 2 }, { "x": 1484124434563, "y": 1 }, { "x": 1484124435975, "y": 6 }, { "x": 1484124437624, "y": 6 }, { "x": 1484124440760, "y": 4 }, { "x": 1484124444016, "y": 6 }, { "x": 1484124446655, "y": 10 }, { "x": 1484124448596, "y": 2 }, { "x": 1484124450839, "y": 7 }, { "x": 1484124452820, "y": 6 }, { "x": 1484124454660, "y": 6 }, { "x": 1484124456322, "y": 10 }, { "x": 1484124457993, "y": 11 }, { "x": 1484124459839, "y": 5 }, { "x": 1484124462118, "y": 9 }, { "x": 1484124464724, "y": 6 }, { "x": 1484124467396, "y": 7 }, { "x": 1484124470081, "y": 3 }, { "x": 1484124475097, "y": 10 }, { "x": 1484124484548, "y": 2 }, { "x": 1484124498625, "y": 10 }, { "x": 1484124526543, "y": 2 }, { "x": 1484124531178, "y": 6 }, { "x": 1484124536233, "y": 11 }, { "x": 1484124571541, "y": 1 }, { "x": 1484124595464, "y": 7 }];
/* converting to valid UNIX timestamp ...*/
data.forEach(function (element) { element.x = Math.floor(element.x / 1000); })
/* sorting in ASC to get MIN and MAX for Y-axis ... */
data.sort(function (a, b) { return a.y - b.y; });
/* creating a scale for Y-Axis with MIN and MAX of Y-Axis values ..*/
var scale = d3.scale.linear().domain([data[0].y, data[data.length - 1].y]).nice();
/* sorting data by X values in asending order.... */
data.sort(function (a, b) { return a.x - b.x; });
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
renderer: 'line',
series: [{
color: 'steelblue',
data: data,
name: 'Series A',
scale: scale
}]
});
/* Using a predefined time unit formatting for x-axis ... */
//var xAxisUnit = new Rickshaw.Fixtures.Time().unit('minute');
/* Custom time unit formatting for x-axis ... */
var xAxisUnit = {
name: 'custom',
seconds: 30,
formatter: function (d) {
/* formatting via minutes: seconds. NOTE UTC is being used, and those functions are from the default JS Date class .... */
return d.getUTCMinutes() + 'm :' + d.getUTCSeconds() + 's';
}
}
new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local(),
timeUnit: xAxisUnit
});
new Rickshaw.Graph.Axis.Y.Scaled({
element: document.getElementById('axis0'),
graph: graph,
scale: scale,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
new Rickshaw.Graph.HoverDetail({
graph: graph
});
graph.render();
#axis0 {
position: absolute;
height: 800px;
width: 40px;
}
#axis1 {
position: absolute;
left: 1050px;
height: 800px;
width: 40px;
}
#chart {
left: 50px;
width: 1000px;
position: absolute;
}
<link href="http://code.shutterstock.com/rickshaw/src/css/graph.css" rel="stylesheet"/>
<link href="http://code.shutterstock.com/rickshaw/src/css/detail.css" rel="stylesheet"/>
<link href="http://code.shutterstock.com/rickshaw/examples/css/lines.css" rel="stylesheet"/>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v3.js"></script>
<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>
<div id="axis0"></div>
<div id="chart"></div>