Morris.js xlabels 在垂直位置被切割

Question

我正在使用 Morris.js

我想添加日期时间格式的xlabels (2012-02-14 12:55:00), 我想把它们放在垂直位置。

但问题是文本的开头不合适。

下面是我的代码：

Morris.Bar({
    element : 'graph_bar',
    data:[<?php 
    echo  $chart_data; ?>],
    xkey:  <?php echo  "'$eje_x'"; ?>,
    ykeys: [ <?php echo  "$y_keys"; ?>],
    labels: [ <?php echo  "$y_keys"; ?>],
    xLabelAngle: 90,
    hideHover: 'auto'
});

Answer 1

您可以将 svg 的 overflow CSS 属性设置为 visible，如下所示：

svg { overflow: visible !important; }

默认情况下，此属性设置为 hidden，这就是为什么当高度太高时您看不到所有标签的原因。

请尝试以下代码段（似乎该代码段仅适用于整页）：

var data = [
  { "hour": "2012-02-14 11:45:00", "value": 50 },
  { "hour": "2012-02-14 11:55:00", "value": 5 },
  { "hour": "2012-02-14 12:05:00", "value": 10 },
  { "hour": "2012-02-14 12:15:00", "value": 30 },
  { "hour": "2012-02-14 12:25:00", "value": 84 },
  { "hour": "2012-02-14 12:35:00", "value": 43 },
  { "hour": "2012-02-14 12:45:00", "value": 23 },
  { "hour": "2012-02-14 12:55:00", "value": 45 },
  { "hour": "2012-02-14 13:05:00", "value": 100 },
  { "hour": "2012-02-14 13:15:00", "value": 76 },
  { "hour": "2012-02-14 13:25:00", "value": 92 },
  { "hour": "2012-02-14 13:35:00", "value": 8 },
  { "hour": "2012-02-14 13:45:00", "value": 44 },
  { "hour": "2012-02-14 13:55:00", "value": 77 },
  { "hour": "2012-02-14 14:05:00", "value": 88 },
  { "hour": "2012-02-14 14:15:00", "value": 60 }
];

Morris.Bar({
  element: 'graph_bar',
  data: data,
  xkey: 'hour',
  ykeys: ['value'],
  labels: ['Date'],
  parseTime: false,
  xLabelAngle: 90,
});

svg {
  overflow: visible !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="graph_bar"></div>

Morris.js xlabels 在垂直位置被切割

Morris.js xlabels are cut in vertical position

morris.js