hiển thị nhãn trong chú giải công cụ chứ không phải trong trục x cho biểu đồ dạng biểu đồ dòng

Question

Tôi hiện đang sử dụng biểu đồ dạng đường có biểu đồ.js và có một bộ nhãn trông như thế này ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]. Tôi muốn nhãn có liên quan hiển thị trong chú giải công cụ cho biểu đồ, nhưng chỉ muốn mọi nhãn xen kẽ xuất hiện trên trục x của biểu đồ để ngăn chặn sự đông đúc. Có cách nào tôi có thể đạt được điều này?

Tôi hiện đang thay thế mọi giá trị thứ hai từ mảng của mình bằng "", nhưng trong khi đó loại bỏ sự tụt từ trục x của tôi, nó không đáp ứng yêu cầu của tôi để hiển thị nhãn trong chú giải công cụ.

Answer 1

Chỉ cần mở rộng biểu đồ đường thẳng và thay thế xLabels bạn không muốn sau khi khởi tạo của bạn

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
     var xLabels = this.scale.xLabels 
     xLabels.forEach(function (label, i) { 
      if (i % 2 == 1) 
       xLabels[i] = ''; 
     }) 
    } 
}); 


var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
    datasets: [ 
     { 
      fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myLine = new Chart(ctx).LineAlt(lineChartData); 

---

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

---

Answer 2

Để mở rộng trên potatopeelings câu trả lời, chúng ta có thể làm:

var xLabels = this.scale.xLabels 
var modVal = Math.ceil(xLabels.length/10)      
xLabels.forEach(function (label, i) 
{ 
    if (i % modVal != 0) 
     xLabels[i] = ''; 
}) 

để giới hạn số lượng nhãn (trong trường hợp này là 10) sao cho nhãn của bạn sẽ không bao giờ bị đông bất kể bạn có bao nhiêu điểm dữ liệu.

Answer 3

Đối với bất cứ ai tìm cách để đạt được điều này trên Chart JS V2 sau đây sẽ làm việc:

var options = { 
     scales: { 
      xAxes: [{ 
       afterTickToLabelConversion: function(data){ 


       var xLabels = data.ticks; 

       xLabels.forEach(function (labels, i) { 
        if (i % 2 == 1){ 
         xLabels[i] = ''; 
        } 
       }); 
      } 
     }] 
    } 
} 

Sau đó vượt qua các tùy chọn biến như bình thường thành một:

myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
});` 

Answer 4

Tại Chart Option, dưới xAxes bạn có thể xác định tài sản maxTickLimit để bất cứ điều gì bạn thích:

xAxes: [{ 
     ticks: { 
     autoSkip:true, 
     maxTicksLimit:3 
     } 
    }] 

Fiddle: https://jsfiddle.net/p63z7zys/1/

Answer 5

Đây là một trong những điều khó khăn nhất mà tôi đối phó khi sử dụng ChartJ.

Tôi sẽ chia sẻ giải pháp của mình: Tôi vừa chơi với các tùy chọn biểu đồ. Đầu tiên tôi sẽ định nghĩa một số thuộc tính cho xAxe của tôi. Lưu ý rằng tôi đang định dạng nhãn sử dụng callback:

scales: { 
    xAxes: [{ 
     id: "x-", stacked: false, ticks: { 
     autoSkip: false, callback: (label) => { return label + "TEST" } } 
     } 
    ]} 

Để định dạng tiêu đề tooltip Tôi sẽ sử dụng callbacks tùy chọn cho tooltips:

tooltips: { 
     callbacks: { 
      title : (tooltipItems, data) => { 
       var labelIndex = tooltipItems[0].index; 
       var realLabel = data.labels[labelIndex]; 
       return realLabel + "TOOLTIP"; 
     } 
    } 
    } 

Sử dụng các tùy chọn biểu đồ như vậy, tôi có thể hiển thị nội dung khác nhau cho nhãn trục x và tiêu đề chú giải công cụ tương ứng:

enter image description here

Bạn có thể tìm mẫu đầy đủ here.

Hy vọng điều này sẽ hữu ích.