如何从Chart.js的工具提示中删除背景色和颜色示例?

时间:2018-07-23 11:29:24

标签: charts chart.js chartjs-2.6.0

如何从Chart.js的工具提示中删除背景颜色和颜色示例?

我希望他不仅是白色,而且要透明,只显示这个数字,而不是带有颜色示例的正方形。

enter image description here

1 个答案:

答案 0 :(得分:2)

使用tooltips选项

为-> backgroundColor: 'rgba(0, 0, 0, 0)'

分配透明颜色

要删除颜色方块,请使用-> displayColors: false

options: {
  tooltips: {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    displayColors: false
  }
}

请参阅以下工作片段...

$(document).ready(function() {

  var myPieChart = new Chart(document.getElementById('myChart').getContext('2d'),{
    type: 'pie',
    data: {
      datasets: [{
        data: [10, 20, 30],
        backgroundColor: ['rgb(255, 99, 132)','rgb(54, 162, 235)','rgb(255, 205, 86)']
      }],
      labels: [
        'Red',
        'Yellow',
        'Blue'
      ]
    },
    options: {
      tooltips: {
        backgroundColor: 'rgba(0, 0, 0, 0)',
        bodyFontColor: '#000000',
        displayColors: false
      }
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>