web-dev-qa-db-ja.com

Chart.js折れ線グラフのラベル数を制限する

取得したデータからチャート上のすべてのポイントを表示したいのですが、それらのすべてのラベルを表示したくないのは、チャートがあまり読みにくいからです。私はドキュメントでそれを探していましたが、これを制限するパラメータを見つけることができませんでした。

たとえば、グラフも3つのポイントに制限されているため、3つのラベルだけを取りたくありません。出来ますか？

私は今そのようなものを持っています：

enter image description here

3番目から4番目のラベルをすべて残すことができれば、それは素晴らしいことです。しかし、ラベルオプションについてはまったく何も見つかりませんでした。

javascriptcsscanvaschartschart.js
74
mmmm

options.scales.xAxes.ticks.maxTicksLimit オプションを追加してみてください：

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

具体的には、元のラベルのリストが次のようになっているとしましょう。

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

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

17
ben

UPDATE：

フォークを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ブランチを確認してください。

使用方法：

棒グラフと折れ線グラフに適用できます。

ユーザーは{ showXLabels: 10 }を渡して、10個のラベルのみを表示できるようになりました（実際に表示されるラベルの数は、x軸に存在するラベルの総数によって多少異なる場合がありますが、10個に近いままです）

非常に大量のデータがある場合に非常に役立ちます。以前は、グラフは狭い空間で互いに重ねられたx軸ラベルのために荒廃したように見えていました。 showXLabelsを使用すると、ユーザーは使用可能なスペースに収まるラベルの数にラベルの数を減らすことができます。

比較のために添付の画像をご覧ください。

showXLabelsオプションなし： enter image description here

{ showXLabels: 10 }がオプションに渡された場合： enter image description here

それについての議論はここにあります： https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

13
Haywire

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
});`
11
George D

chart.js github issue＃12 によると。現在のソリューションは次のとおりです。

  1. 2.0アルファを使用する（本番ではない）
  2. 混雑しすぎた場合、X軸をまったく非表示にします（まったく受け入れられません）。
  3. x軸のラベルスキップを手動で制御する（レスポンシブページではない）

しかし、数分後、より良い解決策があると思います。

次のスニペットは、ラベルを自動的に非表示にします。 draw()を呼び出す前にxLabelsを空の文字列で変更し、その後に復元します。さらに、非表示の後にスペースが増えるため、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は外部依存関係であることに注意してください。

2
yegong

私は同様のタイプの問題があり、私の特定の問題に対するニースの解決策を与えられました chartjs折れ線グラフのx軸ではなくツールチップにラベルを表示します 。これがあなたを助けるかどうか見てください

1
vsank7787

この答え は魅力のように機能します。

clone関数について疑問がある場合は、これを試してください。

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