如何格式化chartjs中x軸標簽的日期字符串？

Question

我最近參與了chart.js時間尺度圖表。 但現在我想在01-02-2017，02-06-2017等data標注，而不是“2017年2月4日”，“2017年2月9日”等。

在這里我的代碼

var aR = null;  //store already returned tick
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
           /* labels: ["01-01-2017", "03-01-2017", "04-02-2017", "09-02-2017", "03-03-2017", "17-03-2017","23-03-2017","09-04-2017"],*/

      labels: ["1 January 2017", "3 January 2017","12 January 2017","20 January 2017","22 January 2017","23 January 2017","27 January 2017", "4 February 2017", "9 February 2017", "3 March 2017", "17 March 2017","23 March 2017","15 March 2017"],
      datasets: [{
         label: "My First dataset",
         backgroundColor: 'rgba(255, 99, 132, 0.5)',
         borderColor: 'rgb(255, 99, 132)',
         data: [12, 16, 2, 7, 15, 5, 11, 10, 11, 1, 8, 9, 15],
         lineTension: 0
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               autoSkip: false,
               callback: function(e) {
                  var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
                  if (tick != aR) {
                     aR = tick;
                     return tick;
                  }
               }
            }
         }],
         yAxes: [{
            ticks: {
               min: 0,
               max: 30
            }
         }]
      }
   }
});

那我怎么能重新標記他們的標簽。 請指導我。 謝謝..

Answer 1

我假設，您希望將01 January 2017的x軸標簽顯示為01-01-2017 。

如果是這種情況那么，您需要重新格式化日期字符串，您可以通過以下方式完成...

 var date_arr = ["01-01-2017", "03-01-2017", "04-02-2017", "09-02-2017", "03-03-2017", "17-03-2017", "23-03-2017", "09-04-2017"]; var labels = formatDate(date_arr); function formatDate(arr) { var new_date = []; arr.forEach(function(d) { var date = d.split('-')[0].replace(/\\d+/, function(e) { switch (e) { case '01': case '21': case '31': return e + 'st'; case '02': case '22': return e + 'nd'; case '03': case '23': return e + 'rd'; default: return e + 'th'; } }); var month = new Date(d.split('-')[1]).toLocaleString('en-us', { month: "long" }); var year = d.split('-')[2]; new_date.push(date + ' ' + month + ' ' + year); }); return new_date; } /*** GENERATE CHART ****/ var aR = null; //store already returned tick var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: "My First dataset", backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgb(255, 99, 132)', data: [12, 16, 10, 11, 9, 15, 13, 16], lineTension: 0 }] }, options: { scales: { xAxes: [{ ticks: { autoSkip: false, callback: function(e) { var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\\d+/g)[0]; if (tick != aR) { aR = tick; return tick; } } } }], yAxes: [{ ticks: { min: 0, max: 30 } }] } } }); 

 <canvas id="myChart" height="200"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>