主页 / 问题 / 1071312
Accepted
Aslero
Asked:2020-01-18 15:52:52 +0000 UTC2020-01-18 15:52:52 +0000 UTC

Chartjs 在悬停时添加百分比

  • 772

悬停在图表上时如何添加百分比，使其为 Wins: 32%，现在它只显示 Wins: 32 悬停在

<script>
                    var ctx = document.getElementById('myChart').getContext('2d');
                    const total = parseInt($('#t-games').html());
                    const wins = parseInt($('#wins').html());
                    const los = parseInt($('#los').html());
                    var myChart = new Chart(ctx, {  
                         options: {

                            scales: {
                              xAxes: [{
                                gridLines: {
                                  display: false
                                },
                                ticks: {
                                    display: false
                                  }
                              }],
                              yAxes: [{
                                gridLines: {
                                  display: false
                                },
                                ticks: {
                                    display: false
                                  }
                              }]
                            },

                          },
                        type: 'doughnut',
                        data: {
                            labels: ['Wins', 'Loses '],
                            datasets: [{
                                data: [wins,los],
                                backgroundColor: [
                                    'rgba(31, 210, 31, 0.86)',
                                    'rgba(225, 39, 39, 0.86)'
                                ],
                                borderColor: [
                                    'rgba(31, 210, 31, 0.86)',
                                    'rgba(225, 39, 39, 0.86)'
                                ],
                                borderWidth: 1
                            }]
                        }
                    });
                    </script>
javascript

1 个回答

  1. Best Answer

    const total = 100,
      wins = 25 + Math.floor(Math.random() * (total - 25)),
      los = total - wins;
const ctx = document.getElementById('chart-area').getContext('2d');
const myChart = new Chart(ctx, {
  options: {
    scales: {
      xAxes: [{
        gridLines: { display: false },
        ticks: { display: false }
      }],
      yAxes: [{
        gridLines: { display: false },
        ticks: { display: false }
      }],
    },
  },
  type: 'doughnut',
  data: {
    labels: ['Wins', 'Loses'],
    datasets: [{
      data: [wins, los],
      backgroundColor: [
        'rgba(31, 210, 31, 0.86)',
        'rgba(225, 39, 39, 0.86)'
      ],
      borderColor: [
        'rgba(31, 210, 31, 0.86)',
        'rgba(225, 39, 39, 0.86)'
      ],
      borderWidth: 1
    }]
  }, 
  options: {
    tooltips: {
      callbacks: {
        label(tooltipItem, data) {
          const val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
          let label = data.labels[tooltipItem.index] || '';
          if (label)
            label += ': '; 
          return label + val + '%';
        }
      }, 
    }, 
  }, 
});
    <div style="width: 350px;">
  <canvas id="chart-area"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

    • 2

相关问题