chartjs273 饼图自动展示tooltip

要在Chart.js 2.7.3中自动展示饼图的工具提示，您需要在创建图表时包含以下代码：

options: {
   tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
         label: function(tooltipItems, data) { 
            return data.labels[tooltipItems.index] + ': ' + data.datasets[0].data[tooltipItems.index] + '%'; }
      }
   },
   animation: {
      animateRotate: true,
      animateScale: true
   }
}

这将启用工具提示并将它们设置为单一模式。它还包括一个回调函数，它将返回包含标签和数据的字符串，以便在工具提示中显示。

此外，该代码还包括动画选项，以使饼图以旋转和缩放的方式显示。

完整的图表代码如下所示：

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
   type: 'pie',
   data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3],
         backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
         ],
         borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         borderWidth: 1
      }]
   },
   options: {
      tooltips: {
         enabled: true,
         mode: 'single',
         callbacks: {
            label: function(tooltipItems, data) { 
               return data.labels[tooltipItems.index] + ': ' + data.datasets[0].data[tooltipItems.index] + '%'; }
         }
      },
      animation: {
         animateRotate: true,
         animateScale: true
      }
   }
});

这将创建一个带有自动显示工具提示的饼图。