Vue.js中实现Chart.js点击事件跳转并带筛选功能

1. 后端数据扩展（传递筛选映射） #

修改后端控制器，在返回的统计数据中添加每个标签对应的筛选条件，让前端能直接根据点击索引获取对应筛选参数：

$users = User::count();
$active = User::where('is_suspended', 0)->count();
$suspendedUsers = User::where('is_suspended', 1)->count();

$post_data = array(
    'labels' => [
        'Accounts (' . $users . ')',
        'Active (' . $active . ')',
        'Suspended (' . $suspendedUsers . ')', 
    ],
    'datasets' => [
        [
            'backgroundColor' => ['#695CFE', '#191641', '#F2C335'],
            'data' => [$users, $active, $suspendedUsers]
        ],
    ],
    // 筛选条件与labels索引一一对应
    'filters' => [
        [], // 全部用户：无筛选
        ['is_suspended' => 0], // 活跃用户：is_suspended=0
        ['is_suspended' => 1] // 封禁用户：is_suspended=1
    ]
);

return response()->json($post_data);

2. 前端Chart组件添加点击事件 #

修改Vue饼图组件，在chartOptions中配置onClick事件，实现点击扇区后的跳转逻辑：

<template>
    <div class="container card mx-0 my-2 p-2">
        <Doughnut v-if="loaded"
            :chart-options="chartOptions"
            :chart-data="chartData"
            :width="width"
            :height="height"
        />
    </div>
</template>

<script>
    import { Doughnut } from 'vue-chartjs/legacy'
    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement } from 'chart.js'

    // 饼图需注册ArcElement，移除柱状图相关组件
    ChartJS.register(Title, Tooltip, Legend, ArcElement)

    export default {
        name: 'PieChart',
        components: { Doughnut },

        props: {
            width: {
                type: Number,
                default: 200
            },
            height: {
                type: Number,
                default: 100
            },
        },  
        
        data: () => ({
            chartOptions: {
                responsive: true,
                onClick: (event, elements) => {
                    // 确保点击到饼图扇区
                    if (elements.length > 0) {
                        const clickedIndex = elements[0].index;
                        const filterParams = this.chartData.filters[clickedIndex];
                        
                        // 构建URL查询参数
                        const queryString = new URLSearchParams(filterParams).toString();
                        // 跳转到用户表格页面（替换为你的实际路由）
                        window.location.href = `/users${queryString ? '?' + queryString : ''}`;
                    }
                }
            },
            loaded: false,
            chartData: {}
        }),
        async mounted () {
            this.loaded = false
        
            try {
                let response = await fetch('/home/user-statistics-doughnutchart')
                let userdata = await response.json()
                this.chartData = userdata
                this.loaded = true
            } catch (e) {
                console.error(e)
            }
        }
    }
</script>

3. 用户表格页面处理筛选参数 #

在用户表格的Vue组件中，读取URL查询参数，发起带筛选条件的请求：

<template>
    <!-- 用户表格内容 -->
</template>

<script>
export default {
    data() {
        return {
            users: []
        }
    },
    async mounted() {
        const searchParams = new URLSearchParams(window.location.search);
        const response = await fetch(`/users?${searchParams.toString()}`);
        this.users = await response.json();
    }
}
</script>

4. 后端用户列表接口支持筛选 #

修改用户列表控制器，根据请求参数筛选用户：

public function getUsers(Request $request) {
    $query = User::query();
    
    // 处理is_suspended筛选
    if ($request->has('is_suspended')) {
        $query->where('is_suspended', $request->input('is_suspended'));
    }
    
    // 可扩展其他筛选条件
    
    $users = $query->get();
    return response()->json($users);
}

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