web-dev-qa-db-ja.com

chart.jsのx軸のラベル/テキストを削除する

Chart.jsに表示されるx軸のラベル/テキストを非表示にするにはどうすればよいですか？

scaleShowLabels:falseを設定すると、y軸ラベルのみが削除されます。

<script>
    var options = {
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    };
    var lineChartData = {
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>
javascripthtml5chartschart.js
51
Sonny G

Chart.js 2.1以降の更新

var chart = new Chart(ctx, {
    ...
    options:{
        scales:{
            xAxes: [{
                display: false //this will remove all the x-axis grid lines
            }]
        }
    }
});


var chart = new Chart(ctx, {
    ...
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false //this will remove only the label
                }
            }]
        }
    }
});

参照：chart.jsドキュメント

以下の参照用の古い回答（現在のバージョンが1.0ベータのときに書かれた）：

chart.jsにラベルを表示しないようにするには、scaleShowLabels : falseを設定し、labelsを渡さないようにする必要があります。

<script>
    var options = {
        ...
        scaleShowLabels : false
    };
    var lineChartData = {
        //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
        //labels : ["1","2","3","4","5","6","7"],
        ... 
    }
    ...
</script>
95
giammin

（この質問は chart.jsで、モバイルからアクセスする場合、棒グラフのx軸ラベル/テキストを非表示にすることは可能ですか？ ）のオプション、2.1.4（および少し前）

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}
15
Kapytanhook
var lineChartData = {
    labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
        ,datasets : [
                {
                        label: "My First dataset",
                        fillColor : "rgba(220,220,220,0.2)",
                        strokeColor : "rgba(220,220,220,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        pointHighlightFill : "#fff",
                        pointHighlightStroke : "rgba(220,220,220,1)",
                        
                        data: [28, 48, 40, 19, 86, 27, 90]
                }
        ]
}



window.onload = function(){
        var options = {
                scaleShowLabels : false // to hide vertical lables
        };
        var ctx = document.getElementById("canvas1").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, options);

}
11
baligena

Chartjsでラベルを削除するというこの問題に直面しました。ドキュメントが改善されたようです。 http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Chart.defaults.global.legend.display = false;

このグローバル設定により、すべてのチャートに凡例が表示されなくなります。これで十分だったので使用しました。個々のチャートの凡例を避ける方法がわかりません。

7
Muthukannan Kanniappan

Christuttyの答えに触発され、ここにソースを変更するソリューションがありますが、完全にはテストされていません。まだ何の問題もありません。

デフォルトセクションで、行71の周りに次の行を追加します。

// Boolean - Omit x-axis labels
omitXLabels: true,

次に、行2215付近で、これをbuildScaleメソッドに追加します。

//if omitting x labels, replace labels with empty strings           
if(Chart.defaults.global.omitXLabels){
    var newLabels=[];
    for(var i=0;i<labels.length;i++){
        newLabels.Push('');
    }
    labels=newLabels;
}

これにより、ツールヒントも保持されます。

6
MichaelG

最も簡単な解決策は次のとおりです。

scaleFontSize: 0

chart.jsドキュメント を参照してください

笑顔の質問

4
叶碧颖

ツールチップのためにラベルを保持したいが、バーの下に表示されないようにしたい場合、次のハックが役に立つかもしれません。私はプライベートイントラネットアプリケーションで使用するためにこの変更を行い、効率や副作用についてはテストしていませんが、必要なことは行いました。

Chart.jsの約71行目に、バーラベルを非表示にするプロパティを追加します。

// Boolean - Whether to show x-axis labels
barShowLabels: true,

1500行目で、このプロパティを使用してthis.endPointの変更を抑制します（この行以外を無効にすると、グラフのチャンクが消えたり、誤ってレンダリングされたため、計算コードの他の部分が必要になります）。

if (this.xLabelRotation > 0) {
    if (this.ctx.barShowLabels) {
        this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
    } else {
        // don't change this.endPoint
    }
}

約1644行目で、プロパティを使用してラベルのレンダリングを抑制します。

if (ctx.barShowLabels) {    
    ctx.fillText(label, 0, 0);
}

Chart.jsソースにこの変更を加えたいのですが、gitにはそれほど慣れておらず、厳密にテストする時間がないので、何も壊さないようにします。

3
christutty