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ì khi đó biểu đồ không dễ đọc. Tôi đã tìm kiếm nó trong tài liệu, nhưng không thể tìm thấy bất kỳ thông 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ụ, bởi vì khi đó biểu đồ cũng bị giới hạn ở ba điểm. Có khả thi không?

Tôi có một cái gì đó giống như ngay bây giờ:

Nếu tôi có thể chỉ để lại mỗi nhãn thứ ba phần tư thì 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.

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

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

Để rõ ràng, giả sử danh sách nhãn ban đầu của bạn trông giống như sau:

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

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

Đối với bất kỳ ai muốn đạt được điều này trên Biểu đồ JS V2, những điều sau sẽ hoạt động:

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


                    var xLabels = data.ticks;

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

Sau đó, chuyển biến tùy chọn như bình thường vào:

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

CẬP NHẬT:

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

CÂU TRẢ LỜI GỐC:

Đối với những người vẫn gặp phải vấn đề này, tôi đã tạm dừng Chart.js để giải quyết vấn đề tương tự. Bạn có thể kiểm tra trên: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Chi nhánh cũ hơn! Kiểm tra nhánh showXLabels để biết lần kéo mới nhất.

Cách sử dụng:

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

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

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

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

Không có showXLabelstùy chọn:

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

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

để quay trục

dùng cái này:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }

Theo chart.js github, số 12 . Các giải pháp hiện tại bao gồm:

1. Sử dụng 2.0 alpha (không phải sản xuất)
2. Ẩn trục x hoàn toàn khi nó bắt đầu quá đông (không thể chấp nhận được)
3. điều khiển thủ công nhãn bỏ qua trục x (không phải trong trang đáp ứng)

Tuy nhiên, sau một vài phút, tôi nghĩ có một giải pháp tốt hơn.

Đoạn mã sau sẽ tự động ẩn các nhãn . Bằng cách sửa đổi xLabelsvới chuỗi trống trước khi gọi draw()và khôi phục chúng sau đó. Thậm chí, có thể áp dụng các nhãn x xoay lại vì có nhiều khoảng trống hơn sau khi ẩn.

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Xin lưu ý rằng đó clonelà một sự phụ thuộc bên ngoài.

tôi đã gặp một loại vấn đề tương tự và đã được đưa ra một giải pháp tốt cho nhãn hiển thị vấn đề cụ thể của tôi trong chú giải công cụ nhưng không phải trong trục x cho biểu đồ đường chartjs . Xem điều này có giúp bạn không

Câu trả lời này hoạt động giống như một sự quyến rũ.

Nếu bạn đang thắc mắc về clonechức năng này, hãy thử chức năng này:

var clone = function(el){ return el.slice(0); }

Trong tệp Chart.js, bạn sẽ tìm thấy (trên dòng 884 cho tôi)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

Nếu bạn chỉ kết thúc một cuộc gọi đến fillTextbằng một dòng if ( i % config.xFreq === 0){ ... } và sau đó chart.Line.defaultsthêm một dòng nào đó, xFreq : 1bạn sẽ có thể bắt đầu sử dụng xFreqtrong optionskhi gọi new Chart(ctx).Line(data, options).

Xin lưu ý rằng điều này khá là hacky.