Chart.js 2.0: Cách thay đổi tiêu đề của chú giải công cụ

Question

Tha thứ cho tôi về tiếng Anh đôi khi kém của tôi. Tiếng Hà Lan là ngôn ngữ mẹ đẻ của tôi.

Tôi đã tạo một bảng xếp hạng Chart.js hiển thị cho tôi mức sử dụng năng lượng được báo cáo bằng đồng hồ điện thông minh chính của tôi. Tôi đã nhận được nó gần như làm việc như cách tôi muốn, nhưng có một điều tôi không thể quản lý để làm cho nó hoạt động theo cách tôi muốn bởi vì tôi không hiểu một điều nhỏ.

Với một số trợ giúp của người dùng "iec" tại chủ đề "Chart.js V2: Add prefix or suffix to tooltip label" Tôi đã có thể thay đổi nhãn ở chú giải công cụ. Nó bây giờ cho thấy độc đáo tiền tố và hậu tố mong muốn của tôi:

tooltips: { 
    enabled: true, 
    mode: 'single', 
    backgroundColor: 'rgba(0,0,0,0.9)', 
    titleFontSize: 14, 
    titleFontStyle: 'bold', 
    titleFontColor: "#FFF", 
    bodyFontSize: 12, 
    bodyFontStyle: 'normal', 
    bodyFontColor: "#FFF", 
    footerFontSize: 12, 
    footerFontStyle: 'normal', 
    footerFontColor: "#FFF", 
    cornerRadius: 5, 
    callbacks: { 
     label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135 
      //Return value for label 
      return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt'; 
     } 
    } 
} 

Khi tôi cố gắng thêm chính xác cùng mã để sửa đổi tiêu đề tôi đã undefined tại nơi một ngày và thời gian sẽ được hiển thị:

tooltips: { 
    enabled: true, 
    mode: 'single', 
    backgroundColor: 'rgba(0,0,0,0.9)', 
    titleFontSize: 14, 
    titleFontStyle: 'bold', 
    titleFontColor: "#FFF", 
    bodyFontSize: 12, 
    bodyFontStyle: 'normal', 
    bodyFontColor: "#FFF", 
    footerFontSize: 12, 
    footerFontStyle: 'normal', 
    footerFontColor: "#FFF", 
    cornerRadius: 5, 
    callbacks: { 
     title: function(tooltipItems, data) { 
      //Return value for title 
      return 'Date: ' + tooltipItems.xLabel + ' GMT+2'; 
     }, 
     label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135 
      //Return value for label 
      return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt'; 
    } 
} 

với câu trả lời của người sử dụng "Lukman" ở chủ đề "Print content of JavaScript object? [duplicate]" tôi phát hiện ra rằng tôi có thể hiển thị nội dung của "đối tượng tooltipItems":

alert(tooltipItems.toSource()) 

Displa này yed một sự khác biệt thú vị về đối tượng "tooltipItems" giữa "tiêu đề" và "nhãn".

Các "tooltipItems" đối tượng ở "label" hiển thị này như nội dung:

({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}) 

Trong khi "tooltipItems" đối tượng ở "title" hiển thị như nội dung này:

[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}] 

Các ký tự bắt đầu và ký tự kết thúc khác nhau. Bạn có thể đọc một trong "nhãn" bằng tooltipItems.yLabel nhưng không thể đọc một trong "tiêu đề" bằng tooltipItems.xLabel vì nó hiển thị cho tôi "không xác định". Toàn bộ tiêu đề bây giờ sẽ là Date: undefined GMT+2 insteas của Date: 2016-08-07 23:41:57 GMT+2

Tôi đã làm gì sai? Ai đó có thể giải thích cho tôi sự khác biệt giữa 2 kết quả đầu ra của nội dung đối tượng của "tooltipItems" và cách đọc chỉ mục "xLabel" và "yLabel" không?

Answer 1

Tôi cũng gặp phải sự cố tương tự nhưng đã được giải quyết với vấn đề này.

return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';