如何在js的莫里斯折线图中显示日期而不是年份答案

【问题标题】：How to display date instead of year in morris line chart in js如何在js的莫里斯折线图中显示日期而不是年份
【发布时间】：2021-01-01 08:40:05
【问题描述】：

我正在使用莫里兹折线图。但它在 x 轴上显示年数我认为它是字符串我试图修改它但它没有发生。这是它现在显示的图像。

这是我现在使用的代码

new Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'kt_morris_1',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{
            y: `${invoice_date0}`,
            a: invoice_income0,

        },
        {
            y:  `${invoice_date1}`,
            a: 75,
      
        },
        {
            y:  `${invoice_date2}`,
            a: 50,
      
        },
        {
            y:  `${invoice_date3}`,
            a: 75,
      
        },
      
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'y',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['a'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Total Invoice'],
    lineColors: ['#6e4ff5', '#f6aa33']
});

invoice_date0 中的变量是此格式中的日期dd-mm-Year

我想在 x 轴上显示我该怎么做？

【问题讨论】：

标签： javascript jquery chart.js morris.js

【解决方案1】：

根据库documentationmorris.js 要求日期格式为“yyyy-mm-dd”。

因此您可以简单地使用转换函数将您使用的格式从“dd-mm-Year”更改为“yyyy-mm-dd”

function toISO(dateString) {
   var parts = dateString.split('-');
   return parts[2] + '-' + parts[1] + '-' + parts[0];            
}
        
$(document).ready(function () {

new Morris.Line({
     // ID of the element in which to draw the chart.
     element: 'kt_morris_1',
     // Chart data records -- each entry in this array corresponds to a point on
     // the chart.
     data: [{
         y: toISO('27-12-2020'),
         a: 100,
     },
     {
         y: toISO('28-12-2020'),
         a: 75,
     },
     {
          y: toISO('29-12-2020'),
          a: 50,
      },
      {
          y: toISO('30-12-2020'),
          a: 75,
       }],
       // The name of the data record attribute that contains x-values.
       xkey: 'y',
       // A list of names of data record attributes that contain y-values.
       ykeys: ['a'],
       // Labels for the ykeys -- will be displayed when you hover over the
       // chart.
       labels: ['Total Invoice'],
       lineColors: ['#6e4ff5', '#f6aa33']
  });
});

&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"&gt;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="kt_morris_1"></div>

【讨论】：

【解决方案2】：

您可以使用moment.js 将您的日期转换为morris.js 期望的格式。

请看下面的可运行代码sn-p，看看它是如何工作的。

const data = [
  { y: '01-01-2021', a: 48 },
  { y: '02-01-2021', a: 75 },
  { y: '03-01-2021', a: 50 },
  { y: '04-01-2021', a: 75 }
];

Morris.Line({
  element: 'kt_morris_1',
  data: data.map(o => ({ y: moment(o.y, 'DD-MM-YYYY').format('YYYY-MM-DD'), a: o.a })),
  xkey: 'y',
  ymin: 40,
  ykeys: ['a'],
  xLabels: 'day',
  xLabelFormat: d => moment(d).format('DD-MM-YYYY'),  
  labels: ['Total Invoice'],
  lineColors: ['#6e4ff5', '#f6aa33']
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="kt_morris_1"></div>

【讨论】：

【解决方案3】：

你可以写得更短

xLabelFormat: function(x) {return x.split('-').reverse().join('-')}

【讨论】：