莫里斯图表日自定义问题

Question

我正在使用莫里斯折线图，我想在图表中显示 7 天的客户注册，但我的图表中没有显示周一和周二。请告诉我如何解决这个问题。

我想像这张图表一样显示工作日。

Morris.Line({
  element: 'myfirstchart',
  data: [{
      "period": "2018-02-26",
      "total": 4
    },
    {
      "period": "2018-02-27",
      "total": 2
    },
    {
      "period": "2018-02-28",
      "total": 5
    },
    {
      "period": "2018-03-01",
      "total": 9
    },
    {
      "period": "2018-03-02",
      "total": 15
    },
    {
      "period": "2018-03-03",
      "total": 12
    }
  ],
  lineColors: ['#f5901a', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
  xkey: 'period',
  ykeys: ['total'],
  labels: ['Total'],
  xLabels: 'day',
  xLabelAngle: 90,
  xLabelFormat: function(d) {
    var weekdays = new Array(7);
    weekdays[0] = "MON";
    weekdays[1] = "TUE";
    weekdays[2] = "WED";
    weekdays[3] = "THU";
    weekdays[4] = "FRI";
    weekdays[5] = "SAT";
    weekdays[6] = "SUN";

    return weekdays[d.getDay() - 1] + '-' +
      ("0" + (d.getMonth() + 1)).slice(-2) + '-' +
      ("0" + (d.getDate())).slice(-2);
  },
  resize: true
});

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

<div id="chart_div" style="width: 100%; height: 300px;">
  <div class="chart-title">Client Registrations</div>
  <div id="myfirstchart" style="height: 250px;"></div>
</div>

Answer 1

首先请注意 getDay() 从 0 开始表示星期日，因此您的日期名称数组也应这样做以保持一致。

至于实际问题，那是因为您已将标签设置为以一定角度显示，而左侧 space 物理上不足以显示一个。

要解决这个问题，您可以删除角度并修改 JS 以仅显示缩写的日期名称，按照您图片中的设计：

var weekdays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

Morris.Line({
  element: 'myfirstchart',
  data: [{
      "period": "2018-02-26",
      "total": 4
    },
    {
      "period": "2018-02-27",
      "total": 2
    },
    {
      "period": "2018-02-28",
      "total": 5
    },
    {
      "period": "2018-03-01",
      "total": 9
    },
    {
      "period": "2018-03-02",
      "total": 15
    },
    {
      "period": "2018-03-03",
      "total": 12
    }, {
      "period": "2018-03-04",
      "total": 12
    }
  ],
  lineColors: ['#f5901a', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
  xkey: 'period',
  ykeys: ['total'],
  labels: ['Total'],
  xLabels: 'day',
  xLabelFormat: function(d) {
    return weekdays[d.getDay()];
  },
  resize: true
});

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

<div id="chart_div" style="width: 100%; height: 300px;">
  <div class="chart-title">Client Registrations</div>
  <div id="myfirstchart" style="height: 250px;"></div>
</div>

莫里斯图表日自定义问题

morris chart days customization issue

javascript

jquery

linechart

weekday

morris.js