代码之家  ›  专栏  ›  技术社区  ›  John Doe

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

  •  1
  • John Doe  · 技术社区  · 7 年前

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

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

    .

    1 回复  |  直到 7 年前
        1
  •  2
  •   WhiteHat    7 年前

    使用 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>