web-dev-qa-db-ja.com

Chart.js v2データセットラベルを隠す

Chart.js v2.1.3を使用してグラフを作成するには、以下のコードがあります。

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

コードは単純に見えますが、グラフからラベルを削除することはできません。私はオンラインで見つけた解決策をたくさん試しましたが、それらのほとんどはChart.js v1.xを使います。

データセットラベルを削除する方法

chart.jschart.js2
71
Raptor

labelとtooltipオプションをそのように設定するだけです。

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

フィドル - http://jsfiddle.net/g19220r6/

165
potatopeelings

追加：

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

スクリプトコードの始めに。

23
Rochan

"title"を削除してツールチップを1行に入れることもできます。

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

enter image description here

7
mpen

これを追加するのと同じくらい簡単です：legend: { display: false, }

//または、必要に応じてこの他のオプションを使用しても機能します。

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

0
Reynald Ramirez de Luna