如何在图表js中显示百分比(%) [英] How to show percentage (%) in chart js

问题描述

我想在图表中显示一个百分比符号。我从控制器获取数据库中的数据，并显示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%，但无法显示%符号

推荐答案

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

此处，%符号被添加到标准工具提示文本.

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']] + '%';
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于如何在图表js中显示百分比(%)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！