laravel 如何在图表js中显示百分比（%）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54169694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show percentage (%) in chart js
提问by sr_atiq
I want to show a percentage sign in the chart.I take data from my database from controller and show the data from vue js file.Here is my chart code.
我想在图表中显示百分比符号。我从控制器中获取数据库中的数据并显示 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>
Here is my controller
这是我的控制器
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];
}
I want to show 67% in the chart but i can not show the % sign
我想在图表中显示 67% 但我无法显示 % 符号
回答by WhiteHat
in the chart options, you can use the tooltips callback to customize the tooltip.
在图表选项中，您可以使用工具提示回调来自定义工具提示。
here, the % sign is added to the standard tooltip text...
在这里，% 符号被添加到标准工具提示文本中...
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
see following working snippet...
请参阅以下工作片段...
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>