Cách định dạng các giá trị thang thời gian trục x trong Chart.js v2

Question

Tôi có thể định dạng chú giải công cụ khi di chuột qua vị trí dữ liệu trên biểu đồ đường qua options.scales.xAxes.time.tooltipFormat, nhưng tôi dường như không làm điều đó cho x- trục đánh dấu lables. My data.labels là một mảng các đối tượng thời điểm. Chúng hiển thị dưới dạng "MMM DD, YYYY" (ví dụ: ngày 23 tháng 2 năm 2012), nhưng tôi muốn bỏ năm đó.

Answer 1

Chỉ cần thiết lập tất cả các đơn vị thời gian được lựa chọn của displayFormat để MMM DD

options: { 
    scales: { 
    xAxes: [{ 
     type: 'time', 
     time: { 
     displayFormats: { 
      'millisecond': 'MMM DD', 
      'second': 'MMM DD', 
      'minute': 'MMM DD', 
      'hour': 'MMM DD', 
      'day': 'MMM DD', 
      'week': 'MMM DD', 
      'month': 'MMM DD', 
      'quarter': 'MMM DD', 
      'year': 'MMM DD', 
     } 
     ... 

Chú ý rằng tôi đã đặt tất cả các định dạng hiển thị của đơn vị để MMM DD. Một cách tốt hơn, nếu bạn có thể kiểm soát một loạt các dữ liệu của bạn và kích thước biểu đồ, sẽ buộc một đơn vị, như vậy

options: { 
    scales: { 
    xAxes: [{ 
     type: 'time', 
     time: { 
     unit: 'day', 
     unitStepSize: 1, 
     displayFormats: { 
      'day': 'MMM DD' 
     } 
     ... 

---

Fiddle - http://jsfiddle.net/prfd1m8q/

Answer 2

theo tài liệu hướng dẫn Chart js trang tick configuration section. bạn có thể định dạng giá trị của mỗi đánh dấu bằng cách sử dụng chức năng gọi lại. ví dụ tôi muốn thay đổi ngôn ngữ của ngày được hiển thị để luôn là tiếng Đức. trong các phần của các tùy chọn trục

ticks: { 
    callback: function(value) { 
     return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'}); 
    }, 
}, 

Answer 3

Bạn có thể định dạng ngày trước khi thêm chúng vào mảng của mình. Đó là cách tôi đã làm. Tôi đã từng AngularJS

// chuyển đổi ngày sang một định dạng tiêu chuẩn

var dt = new Date(date); 

// chăm chỉ ngày, tháng, và đẩy họ vào mảng nhãn của bạn

$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1)); 

Sử dụng mảng này trong thư mục trình bày biểu đồ