2017-05-04 2 views
6

ツールチップからこの四角形を削除するにはどうすればよいですか?ツールチップからsquareラベルを削除し、その情報を1行にまとめるにはどうすればいいですか?

enter image description here

私が管理することができれば、私はちょうどそれが1行のように持っていることを好む:2月 - ここ2

var data = { 
     labels: ['January', 'February', 'March'], 
     datasets: [ 
     { 
      data: [1,2,3] 
     } 
     ] 
    }; 

    var myLineChart = new Chart(document.getElementById('chart'), { 
     type: 'line', 
     data: data, 
     options: { 
      legend: { 
       display: false 
      } 
     } 
    }); 

答えて

12

あなたが行く:

jsfiddle:http://jsfiddle.net/1v9fy5mz/

コード:

HTML

<canvas id="canvas"></canvas>

JS:

var ctx = document.getElementById("canvas").getContext("2d"); 

var data = { 
    labels: ['January', 'February', 'March'], 
    datasets: [{ 
    data: [1, 2, 3] 
    }] 
}; 

var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
    showAllTooltips: true, 
    tooltips: { 
     custom: function(tooltip) { 
     if (!tooltip) return; 
     // disable displaying the color box; 
     tooltip.displayColors = false; 
     }, 
     callbacks: { 
     // use label callback to return the desired label 
     label: function(tooltipItem, data) { 
      return tooltipItem.xLabel + " :" + tooltipItem.yLabel; 
     }, 
     // remove title 
     title: function(tooltipItem, data) { 
      return; 
     } 
     } 
    } 
    } 
}); 
+0

これを追加Open Sansにフォントを変更するだけで、これをどうやって行うのですか? http://jsfiddle.net/xppkLg59/ – Marko

+1

は、削除できないようなスペースを持つタイトルと関係があるようです。テキストを 'title'に移動し、' label'がnullを返すようにします。この更新されたフィドルを見てください:http://jsfiddle.net/t60cd3bg/ –

+0

それ以外のやり方では、 'tooltip.yPadding = 3; 'を変更してください。ここでは、フィドルです:http://jsfiddle.net/v45sydkv/ –

1

あなたが私ならば、私は上に多くのパディングを取得しない理由を知ることが起こるでしょう、あなたのoptionsオブジェクトに

tooltips: { 
    displayColors: false 
} 
関連する問題