人力车图表

Question

我的数据如下图所示：

人力车图表非常适合此数据，因为所有日期之间的日期和时间间隔都很长。我将“价格”列设置为Y轴数据，将“日期”列设置为X轴数据。但是当我添加新条目时，如下面的图像，然后新的点没有显示这个新条目，因为时间间隔是1分钟。

参见id 26和27的条目，时间间隔为1分钟和2秒。因此，图表不会显示这一新观点。而且我还希望将日期设置为每个点的X轴数据值。

在输入27之后，我的图表没有显示300点。我的图表显示了第65个价格为65的条目。见下图。

可能会因为间隔而隐藏。如果我增加间隔，那么它将显示正常。

Answer 1

您遇到的两个问题都与图表的Axis X有关。从您发布的屏幕截图中我假设X轴采用整数值（23,24,25等在图表的峰值附近）。

为了将您的最后一个点绘制到图形中，您只需在数组中插入一个元素并渲染图形。下面是一个数据集[12x2]的例子。

var data = [{ x: 1, y: 92228531 }, 
        { x: 2, y: 106021568 }, 
        { x: 3, y: 123202660 }, 
        { x: 4, y: 132165129 }, 
        { x: 5, y: 151325798 }, 
        { x: 6, y: 179323175 }, 
        { x: 7, y: 203211926 }, 
        { x: 8, y: 226545805 }, 
        { x: 9, y: 248709873 }, 
        { x: 10, y: 281421906 }, 
        { x: 11, y: 308745538 },
        { x: 12, y: 329538099 } ];

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 540,
    height: 240,
    series: [ {
            data: data, 
            color: 'steelblue'
    } ]
} );

var x_axis = new Rickshaw.Graph.Axis.X( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('axis0'),
} );

graph.render();

关于您的上一个问题，如果您想在X轴中渲染时间，则需要使用Rickshaw.Graph.Axis.Time

例如：

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

对于Axis.Time，您需要确保您的数据（在您的情况下是“日期”列中的数据）的格式正确。

尝试使用.toUTCString()您可以找到示例here。