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"]

4番目ごとのラベルのみを表示する場合は、ラベルのリストをフィルタリングして、4番目ごとのラベルが入力され、その他すべてのラベルが空の文字列になるようにします（例：）["0", "", "", "", "4", "", "", "", "8"]。

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] = '';
                        }
                    });
                } 
            }]   
        }
}

次に、オプション変数を通常どおりaに渡します。

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

更新：

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

軸回転用

これを使って：

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

chart.js github issue＃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ファイルで（884行目）を見つけます。

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

あなただけに、1つのラインの呼び出しをラップした場合fillTextと if ( i % config.xFreq === 0){ ... } 、その後にchart.Line.defaults追加何かラインxFreq : 1あなたが使用を開始することができるはずですxFreq、あなたにoptionsあなたが呼び出すときnew Chart(ctx).Line(data, options)。

これはかなりハッキーです。