如何使用 morris.js 更改 x 轴精度？答案

【问题标题】：How do I change the x-axis precision with morris.js?如何使用 morris.js 更改 x 轴精度？
【发布时间】：2014-05-08 02:04:29
【问题描述】：

我有一个图表，沿 x 轴绘制日期，在 y 轴绘制睡眠小时数。

如果我显示 7 天的数据，x 轴会显示每个日期，并且图表看起来不错：

当我将 8 周的数据投入图表时，morris.js 会自动调整 x 轴标签的精度以显示更少的日期（太棒了！），但不会对绘图点进行相同的调整，因此图表如下所示：

如何让 morris.js 只在每个标签间隔放置绘图点？

这是显示图表的代码：

$ ->
  new Morris.Line(
    element: 'naps_chart',
    data: $('#naps_chart').data('naps'),
    xkey: 'happened_at',
    ykeys: ['time'],
    labels: ['Hours']
  );

【问题讨论】：

标签： graph morris.js

【解决方案1】：

我发现这个问题最简单/最好的解决方案是设置pointSize: 0 并平滑图形。它仍然显示悬停时的情节点，看起来好多了。

【讨论】：

【解决方案2】：

试试这个设置

xLabelAngle: 45,

然后你可以看到你的图表如下图

【讨论】：

【解决方案3】：

我自己是这方面的新手，所以如果您已经考虑并考虑到这一点，请原谅我：时间规范是否需要更精确或描述性格式才能让“Morris”理解它？例如（来自这个网站，我发现它在这个领域很有用：http://www.oesmith.co.uk/morris.js/lines.html）：

-- parseTime 设置为 false 以跳过对 X 值的时间/日期解析，而是将它们视为等间距系列。

-- yLabelFormat 一个函数，它接受 y 值并将它们格式化以显示为 y 轴标签。例如：function (y) { return y.toString() + 'km'; }

该网站应该提供更多“洞察力”（请原谅双关语），并且可能只是需要另一个或稍微不同的操作或命令来执行对 x 轴方程值的正确分割。

希望这会有所帮助，哪怕是一点点。

【讨论】：

【解决方案4】：

xLabelMargin: 10,

试试这个

 Morris.Bar({
//
xLabelMargin: 10,

//

});

【讨论】：