如何在图表js中显示百分比（%）

Question

我想在图表中显示百分比符号。我从控制器中获取数据库中的数据并显示 vue js 文件中的数据。这是我的图表代码。

<script>
import { Doughnut } from 'vue-chartjs';

export default {
    props:['appurl'],
    extends: Doughnut,
    data(){
        return{
            item:[],
        }
    },
    mounted() {
        this.getData();
    },
    methods:{
        setChartLoader: function(e) {
            this.$emit('setChartLoader', e);
        },
        renderDoughnutChart(serviceName,serviceData){
            this.renderChart({
                datasets: [{
                    data: serviceData,
                    backgroundColor: [
                        'rgba(41, 121, 255, 1)',
                        'rgba(38, 198, 218, 1)',
                        'rgba(138, 178, 248, 1)',
                        'rgba(255, 100, 200, 1)',
                        'rgba(116, 96, 238, 1)',
                        'rgba(215, 119, 74, 1)',
                        'rgba(173, 92, 210, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(247, 247, 247, 1)',
                        'rgba(227, 247, 227, 1)',
                    ],
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: serviceName,
            }, {responsive: true, maintainAspectRatio: false, cutoutPercentage: 80})
        },
        getData(){
            axios.get(this.appurl+'/dashboardgetdatadoughnut').then(response => {
                this.item = response.data;
                this.setChartLoader(false);
                this.renderDoughnutChart(this.item.serviceName,this.item.serviceCount)
            }).then(function(){

            });
        }
    },
}
</script>

这是我的控制器

public function doughnutData()
{
    $serviceNameArray = array();
    $serviceConfirmed = DB::table('bookings')->whereDate('booking_date', date('Y-m-d'))
        ->select('status',DB::raw('round(count(*) *100 / (select count(*) from bookings WHERE booking_date = curdate())) as count'))
        ->groupBy('status')->get();

    $serviceCount = array();

    foreach($serviceConfirmed as $name)
    {
        array_push($serviceNameArray,$name->status);
        array_push($serviceCount,$name->count);
    }

    return ['serviceName'=>$serviceNameArray,
        'serviceCount'=>$serviceCount];
}

我想在图表中显示 67% 但我无法显示 % 符号

Answer 1

在图表选项中，您可以使用工具提示回调来自定义工具提示。

在这里，% 符号被添加到标准工具提示文本...

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
    }
  }
}

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

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
    }
  }
}

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['confirmed', 'pending'],
    datasets: [{
      data: [67, 33],
      backgroundColor: [
        'rgba(41, 121, 255, 1)',
        'rgba(38, 198, 218, 1)',
        'rgba(138, 178, 248, 1)',
        'rgba(255, 100, 200, 1)',
        'rgba(116, 96, 238, 1)',
        'rgba(215, 119, 74, 1)',
        'rgba(173, 92, 210, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(247, 247, 247, 1)',
        'rgba(227, 247, 227, 1)',
      ],
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
        }
      }
    }
  }
});