javascript - Giới hạn số nhãn trên biểu đồ đường Chart.js

Tôi muốn hiển thị tất cả các điểm trên biểu đồ của mình từ dữ liệu tôi nhận được, nhưng tôi không muốn hiển thị tất cả các nhãn cho chúng, vì nếu như vậy thì biểu đồ sẽ không dễ đọc. Tôi đã tìm trong tài liệu, nhưng không tìm thấy tham số nào có thể giới hạn điều này.

Tôi không muốn chỉ lấy ba nhãn làm ví dụ, vì khi đó biểu đồ cũng sẽ chỉ giới hạn ở ba điểm. Có khả thi không?

Tôi có một thứ như vậy ngay bây giờ:

Nếu tôi có thể bỏ qua mỗi nhãn thứ ba hoặc thứ tư, sẽ thật tuyệt. Nhưng tôi hoàn toàn không tìm thấy gì về các tùy chọn nhãn.

Câu trả lời #1

Hãy thử thêm tùy chọn options.scales.xAxes.ticks.maxTicksLimit:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Câu trả lời số 2

Để cụ thể hơn, giả sử danh sách nhãn gốc của bạn trông như sau:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

Nếu bạn chỉ muốn hiển thị nhãn thứ 4, hãy lọc danh sách nhãn của bạn sao cho mỗi nhãn thứ 4 được điền, và tất cả các nhãn khác là chuỗi rỗng (ví dụ: ["0", "", "", "", "4", "", "", "", "8"]).

Câu trả lời #3

Đối với bất kỳ ai muốn đạt được điều này trên Chart JS V2, điều sau đây sẽ có hiệu quả:

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


                    var xLabels = data.ticks;

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

Sau đó truyền biến options như thường lệ vào a:

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

Câu trả lời #4

CẬP NHẬT:

Tôi đã cập nhật fork của mình với pull mới nhất (tính đến ngày 27 tháng 1 năm 2014) từ nhánh master Chart.js của NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

TRẢ LỜI NGUYÊN BẢN:

Đối với những người vẫn gặp vấn đề này, tôi đã fork Chart.js từ một thời gian trước để giải quyết cùng một vấn đề. Bạn có thể xem tại: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Nhánh cũ! Hãy kiểm tra nhánh showXLabels để lấy pull mới nhất.

Cách sử dụng:

Áp dụng cho biểu đồ cột và biểu đồ đường.

Người dùng bây giờ có thể truyền một { showXLabels: 10 } để chỉ hiển thị 10 nhãn (số lượng nhãn thực tế hiển thị có thể hơi khác tùy vào tổng số nhãn có trên trục x, nhưng nó vẫn sẽ gần với 10)

Giúp rất nhiều khi có một lượng dữ liệu rất lớn. Trước đây, biểu đồ thường trông lộn xộn vì các nhãn trục x chồng lên nhau trong không gian chật hẹp. Với showXLabels, người dùng giờ đây có thể kiểm soát để giảm số lượng nhãn xuống bất kỳ số nhãn nào phù hợp với không gian sẵn có của họ.

Xem các hình ảnh đính kèm để so sánh.

Không có tùy chọn showXLabels:

Với { showXLabels: 10 } được truyền vào tùy chọn:

Đây là một số thảo luận về nó: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Câu trả lời #5

Trong Chart.js 3.2.0:

options: {
    scales: {
        x: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}

Câu trả lời số 6

Đối với Chart.js 3.3.2, bạn có thể sử dụng phương pháp của @Nikita Ag với một vài thay đổi. Bạn có thể kiểm tra tài liệu. Đặt ticks trong xAxis trong scales. Ví dụ:

...
options: {
    scales: {
        xAxis: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}
...