morris图表天定制问题

Question

我正在使用morris折线图我希望在图表中显示7天的客户注册，但MON和Tue没有显示在我的图表中。请让我知道如何解决这个问题。

我想在工作日显示此图表。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先请注意，getDay()在星期日的0处开始，因此您的日期名称数组应该相同以保持一致。

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

要解决此问题，您可以删除角度并修改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>