javascript - 基于人力车月的X轴问题

我的图表工作非常接近完美。我正在通过PHP抓取其数据，并为Rickshaw返回JSON数据，但是一个问题是，我无法获得12月显示在图表上。

我需要显示全年的结果。因此，即使没有12月的记录，我也需要将其显示为0。

我正在做的事情的基本前提是这样的（我实际上没有使用strtotime）

array
(
    "Jan"=>array
    (
        "timestamp"=>strtotime('01-01-'.$this->year),
        "records"=>(array)timestamps
    )
    //do for all months
)

由此，该月的记录量就是该月的记录数组的长度，我也有该月的确切时间戳。

然后，当我对这个数组进行json_encode时，我有一个JS对象，可以迭代以正确地创建Rickshaw系列，我将timestamp键作为其x轴值，并记录了.length作为其y轴值。

除12月外，这工作得非常好。这是图形当前的外观图像

http://i.imgur.com/bzbELHW.png

我不明白的是，每隔一个月就会按预期工作。如果其记录数组的长度为0，则将其绘制为0。由于某种原因，12月才被取消。起初我以为是时区差异，但这实际上是我获取每个月的时间戳的方式

protected function getUnixTime($date_string)
{
    $date = new DateTime($date_string , new DateTimeZone('GMT'));
    return $date->format("U");
}

并使用此工具http://www.epochconverter.com/检查所有时间戳，它们似乎都是正确的。仅供参考，这就是我设置人力车的方式

var graph   =   new Rickshaw.Graph(
                {
                    element:document.querySelector(scope.conf.chart_element),
                    width:scope.conf.chart_width,
                    height:scope.conf.chart_height,
                    renderer:scope.conf.chart_type,
                    series: scope.defaults.graph_series_data.reverse()
                }),
    time    =   new Rickshaw.Fixtures.Time(),
    months  =   time.unit('months'),
    x_axis  =   new Rickshaw.Graph.Axis.Time(
                {
                    graph: graph,
                    timeUnit:months,
                }),
    y_axis  =   new Rickshaw.Graph.Axis.Y(
                {
                    graph: graph,
                    orientation: 'left',
                    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                    element: document.getElementById('y_axis'),
                }),

    legend  =   new Rickshaw.Graph.Legend(
                {
                    element: document.querySelector('#legend'),
                    graph: graph
                });


 graph.render();

任何帮助将不胜感激，这让我难过。

最佳答案

嗯...是的，实际上整个图表都只需要在右侧填充一下即可显示刻度号。它始终是最简单的解决方案。

如果遇到此问题，请尝试在图形的右侧添加一些填充，例如

 padding:{top:0.01 , right:0.007 , bottom:0 , left:0}

那应该解决。

关于javascript - 基于人力车月的X轴问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22651727/