chartjsでx軸ラベルの日付文字列をフォーマットする方法は？

Question

私は最近、chart.jsから時間尺度表で作業しました。でも、今はというラベルで、「2017年2月4日」、「2017年2月9日」などではなく、01-02-2017、02-06-2017のようにしたいと考えています。

ここに私のコード

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

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>