Laravel+JavaScript实现指定账户类型饼图，显示账户名称而非百分比

1. 后端调整：获取账户名称与对应余额 #

首先在Laravel控制器中，修改查询逻辑，确保获取到目标类型账户的名称和对应的汇总余额，同时过滤出你需要的三类账户：

use App\Models\AccountChart;
use Illuminate\Support\Facades\DB;

public function accountChart()
{
    // 筛选指定类型的账户，按名称分组汇总余额
    $accountData = AccountChart::select('account_name', DB::raw('SUM(balance) as total_balance'))
        ->whereIn('account_type', ['Income', 'Expenses', 'Cost of Good Sold'])
        ->groupBy('account_name')
        ->get();

    // 提取前端需要的标签（账户名称）和数据（余额）
    $labels = $accountData->pluck('account_name')->toArray();
    $balances = $accountData->pluck('total_balance')->toArray();

    return view('charts.account-pie', compact('labels', 'balances'));
}

2. 前端饼图配置：显示账户名称 #

假设你使用Chart.js（Laravel项目中最常用的图表库），修改图表配置，让 tooltip 和饼块上的标签都显示账户名称：

基础配置（仅Tooltip显示名称）

如果只需要在鼠标悬浮的 tooltip 中显示账户名称，直接配置 tooltip 的回调函数：

<canvas id="accountPieChart"></canvas>

<script>
const ctx = document.getElementById('accountPieChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: {!! json_encode($labels) !!},
        datasets: [{
            data: {!! json_encode($balances) !!},
            backgroundColor: ['#2ecc71', '#e74c3c', '#f39c12'],
            hoverOffset: 5
        }]
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        // 格式：账户名称: 余额
                        return `${context.label}: ${context.parsed}`;
                    }
                }
            },
            legend: {
                // 图例直接显示账户名称
                labels: {
                    font: { size: 13 }
                }
            }
        }
    }
});
</script>

进阶配置：饼块上直接显示账户名称

如果需要在饼图的每个区块上直接显示账户名称，需要安装chartjs-plugin-datalabels插件：

1. 安装插件：

npm install chartjs-plugin-datalabels

2. 在JS中导入并配置：

<canvas id="accountPieChart"></canvas>

<script>
import 'chartjs-plugin-datalabels'; // 导入插件

const ctx = document.getElementById('accountPieChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: {!! json_encode($labels) !!},
        datasets: [{
            data: {!! json_encode($balances) !!},
            backgroundColor: ['#2ecc71', '#e74c3c', '#f39c12'],
            hoverOffset: 5
        }]
    },
    options: {
        plugins: {
            datalabels: {
                // 格式化显示内容为账户名称
                formatter: (value, context) => context.chart.data.labels[context.dataIndex],
                color: '#ffffff',
                font: { weight: 'bold', size: 12 }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return `${context.label}: ${context.parsed}`;
                    }
                }
            }
        }
    }
});
</script>

注意事项 #

• 确保数据库中account_type字段的取值和你查询中的['Income', 'Expenses', 'Cost of Good Sold']完全匹配（包括大小写、空格），避免过滤不到数据。
• 如果你的项目没有使用Chart.js，只需对应调整你当前使用的图表库的标签配置逻辑，核心是将后端传递的账户名称数组绑定到图表的标签字段。

内容的提问来源于stack exchange，提问作者16_018_RHR