[javascript] Chart.js 선 차트의 레이블 수 제한

chart.js github 문제 # 12 에 따르면 . 현재 솔루션은 다음과 같습니다.

1. 2.0 알파 사용 (프로덕션 아님)
2. 너무 혼잡 해지면 x 축을 전혀 숨 깁니다 (전혀 수용 할 수 없음).
3. x 축의 레이블 건너 뛰기를 수동으로 제어 (반응 형 페이지가 아님)

그러나 몇 분 후에 더 나은 해결책이 있다고 생각합니다.

다음 스 니펫은 라벨을 자동으로 숨 깁니다 . xLabels호출하기 전에 빈 문자열 로 수정 하고 draw()그 후에 복원하십시오. 더군다나 은신 후 더 많은 공간이 있으므로 다시 회전하는 x 레이블을 적용 할 수 있습니다.

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;
    }
});

통지하시기 바랍니다 clone외부 의존성이다.