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

Question

我有一个图表，它绘制了沿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']
  );

Answer 1

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

Answer 2

尝试使用此设置

xLabelAngle: 45,

然后您可以看到您的图表如下图所示

Answer 3

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

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

- yLabelFormat一种接受y值并将其格式化以显示为y轴标签的函数。 例如：function（y）{return y.toString（）+'km'; }

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

希望这会有所帮助，甚至一点点。

〜

Answer 4

xLabelMargin：10，

在

中试试

 Morris.Bar({
//
xLabelMargin: 10,

//

});