6

我有一组日期数据。我应该提供 X 轴值什么值？如何让 Rickshaw 将 X 数据值显示为日期？

我查看了文档和示例，但找不到任何东西。

4

4 回答 4

13

我刚刚开始使用 Rickshaw 并且处于确切的情况。

但是，在我进一步讨论之前，Rickshaw 文档几乎不存在，这非常令人沮丧，因为与其他 JS 图形库相比，Rickshaw 的性能非常出色。

查找示例的最佳方法是深入研究其 github 页面上的源代码和示例代码，尝试理解事物（而不是文档应有的方式）。

话虽如此，让我们尝试在 StackOverflow 上建立一个强大的问题/答案基础！

所以，回到问题 :) 看起来你已经找到了自己的解决方案，但我也会提供我的解决方案。

Rickshaw.Graph.Axis.Time我没有使用 ，而是使用Rickshaw.Graph.Axis.X并相应地设置了tickFormat。

var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE }, 
             { x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ]

var xAxis = new Rickshaw.Graph.Axis.X({
  graph: graph,
  tickFormat: function(x){
                return new Date(x * 1000).toLocaleTimeString();
              }
})
xAxis.render();

toLocaleTimeString()可以是任何 Javascript 日期函数，例如toLocaleString()、toLocaleDateString()、toTimeString()或toUTCString()。显然，因为tickFormat将函数作为参数，所以可以提供自己的格式化程序。

Koliber，如果您也可以提供更多详细信息，我很想了解您的答案。

于 2014-06-19T13:15:36.813 回答
2

除了 Lars 的回复，我发现默认情况下 Rickshaw 正在调用

 .toUTCString(x.value*1000) //(just ctrl+F to find where =) ).

就我而言，出于这个原因，我在 Graphite 和 Rickshaw 之间的 X 上看到了不同的时间标签，一旦我将其更改为

 .toLocaleString(x.value*1000).

另外，您可能需要在两个地方进行修改：Rickshaw.Graph.Axis.Time 和 ...HoverDetails

于 2013-11-28T23:47:20.073 回答
0

我终于发现 X 轴值应该是纪元时间值。然后，使用示例中的代码，我能够显示适当的时间尺度。

我仍然有一个问题，因为我想在 X 轴上显示星期的刻度线。但是，将 timeUnit 设置为 'week' 会导致 JavaScript 错误。但它适用于其他时间单位。

于 2013-10-02T09:40:45.343 回答
0

这些都不适合我。使用 angularjs 的方法是：

'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10

于 2017-10-13T16:15:28.100 回答