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

Question

我正在使用Morris.js

我想以datetime（2012-02-14 12:55:00）的格式添加xlabel， 我想把它们放在垂直位置。

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

下面是我的代码：

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

您可以将overflow的{​​{1}} CSS属性设置为svg，如下所示：

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;
}