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

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

---

내가 얻은 데이터에서 차트의 모든 포인트를 표시하고 싶지만 모든 레이블을 표시하고 싶지는 않습니다. 왜냐하면 차트를 잘 읽을 수 없기 때문입니다. 나는 문서에서 그것을 찾고 있었지만 이것을 제한하는 매개 변수를 찾을 수 없었습니다.

예를 들어 3 개의 레이블 만 사용하고 싶지는 않습니다. 차트도 3 점으로 제한되기 때문입니다. 가능할까요?

나는 지금 그와 같은 것을 가지고 있습니다.

3/4 레이블을 모두 떠날 수 있다면 좋을 것입니다. 그러나 레이블 옵션에 대해서는 전혀 찾지 못했습니다.

---

options.scales.xAxes.ticks.maxTicksLimit옵션을 추가해보십시오 .

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

---

구체적으로, 원래 레이블 목록이 다음과 같다고 가정 해 보겠습니다.

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

네 번째 레이블 만 표시하려면 레이블 목록을 필터링하여 네 번째 레이블이 모두 채워지고 다른 모든 레이블은 빈 문자열이됩니다 (예 :) ["0", "", "", "", "4", "", "", "", "8"].

---

최신 정보:

NNick의 Chart.js 마스터 브랜치에서 가져온 최신 풀 (2014 년 1 월 27 일 기준)로 포크를 업데이트했습니다. https://github.com/hay-wire/Chart.js/tree/showXLabels

원래 답변 :

여전히이 문제에 직면 한 사람들을 위해 동일한 문제를 해결하기 위해 Chart.js를 잠시 포크했습니다. https://github.com/hay-wire/Chart.js/tree/skip-xlabels => 이전 지점 에서 확인할 수 있습니다 ! 최신 풀에 대해서는 showXLabels 브랜치를 확인하십시오.

사용하는 방법:

막대 차트 및 꺾은 선형 차트에 적용됩니다.

사용자는 이제 a { showXLabels: 10 }를 전달하여 10 개의 레이블 만 표시 할 수 있습니다 (실제 표시된 레이블 수는 x 축에있는 총 레이블 수에 따라 약간 다를 수 있지만 여전히 10 개에 가깝게 유지됩니다)

매우 많은 양의 데이터가있을 때 많은 도움이됩니다. 이전에 그래프는 비좁은 공간에서 서로 위에 그려진 x 축 레이블로 인해 황폐 해 보였습니다. 을 사용하면 showXLabels이제 사용자가 사용 가능한 공간에 적합한 레이블 수로 레이블 수를 줄일 수 있습니다.

비교를 위해 첨부 된 이미지를 참조하십시오.

showXLabels옵션 없이 :

{ showXLabels: 10 }옵션 으로 전달 :

여기에 대한 몇 가지 토론이 있습니다 : https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

---

Chart JS V2에서 이것을 달성하려는 모든 사람에게 다음이 작동합니다.

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


                    var xLabels = data.ticks;

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

그런 다음 평소와 같이 옵션 변수를 다음과 같이 전달하십시오.

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

---

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외부 의존성이다.

---

비슷한 유형의 문제가 있었고 툴팁의 특정 문제 표시 레이블에 대한 좋은 솔루션이 제공 되었지만 chartjs 라인 차트의 x 축에는 없습니다 . 이것이 도움이되는지 확인하십시오.

---

이 대답 은 매력처럼 작동합니다.

clone기능 에 대해 궁금한 경우 다음을 시도하십시오.

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

---

Chart.js 파일에서 찾을 수 있습니다.

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

당신은 단지 해당 한 줄 호출을 래핑하는 경우 fillText와 if ( i % config.xFreq === 0){ ... }에 다음과 chart.Line.defaults추가 뭔가 라인 xFreq : 1당신이 사용하기 시작할 수있을 것입니다 xFreq당신에 options전화 할 때 new Chart(ctx).Line(data, options).

이것은 꽤 해키입니다.

참고 URL : https://stackoverflow.com/questions/22064577/limit-labels-number-on-chart-js-line-chart