2016-05-13 5 views
31

にラベルを付ける: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を使用しています。

データセットラベルを削除するにはどうすればよいですか?

答えて

66

ちょうどそう

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

フィドルのようなlabeltooltipオプション設定 - http://jsfiddle.net/g19220r6/

+0

作品を魔法のように、感謝を。ちなみに、折れ線グラフのグラデーションの色を変更する方法は? – Raptor

+1

グラデーションをborderColor/backgroundColorとして使用する方法を意味します。コンテキスト上に作成し、初期化するときに使用してください。http://jsfiddle.net/g9h6gtvx/ – potatopeelings

+0

を参照してください。素晴らしい作品です。ありがとうございました – Raptor

6

追加:あなたのスクリプトコードの開始で

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

を。

0

また、「タイトル」を除去することにより、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

関連する問題