基于人力车月的 X 轴问题答案

【问题标题】：Rickshaw Month based X axis problems基于人力车月的 X 轴问题
【发布时间】：2014-03-26 04:50:01
【问题描述】：

我的图表工作得非常接近完美。我正在通过 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 系列，我将时间戳键作为其 x 轴值传递，并将 records.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();

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

【问题讨论】：

标签： javascript php graph d3.js rickshaw

【解决方案1】：

嗯...是的，它实际上在整个图表中都存在，只是需要在右侧进行一些填充以显示刻度字母。它始终是最简单的解决方案。

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

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

这应该解决它。

【讨论】：