Chart.js环形图点击分段跳转URL出现undefined问题求助

问题 #

点击Chart.js环形图分段后，跳转URL中总是包含undefined值，无法正确跳转到对应分类的页面。尝试通过分段索引构建URL，但结果不符合预期。

相关代码 #

Blade模板（Laravel）

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById('teknisiChart').getContext('2d');

        var chartData = {
            labels: ['4 Tahun', '2-3 Tahun', '1 Tahun', 'Under 1 Tahun'],
            datasets: [{
                data: [
                    {{ $countMoreThan4Years }},
                    {{ $countBetween2and3Years }},
                    {{ $count1YearAgo }},
                    {{ $countLessThan1Year }}
                ],
                backgroundColor: [
                    'rgba(255, 68, 68, 0.8)',
                    'rgba(255, 209, 91, 0.8)',
                    'rgba(223, 250, 125, 0.8)',
                    'rgba(114, 247, 137, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 3
            }]
        };

        var teknisiChart = new Chart(ctx, {
            type: 'doughnut',
            data: chartData,
            options: {
                onClick: function(evt, item) {
                    if (item.length > 0) {
                        var index = item[0].index;
                        console.log('Index:', index);
                        var category = ['more-than-4-years', '2-3-years', '1-year', 'under-1-year'][
                            index
                        ];
                        console.log('Category:', category);
                        window.location.href = `{{ url('/hardware') }}/${category}`;
                    }
                },
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return chartData.labels[tooltipItem.dataIndex] + ': ' + tooltipItem
                                    .formattedValue;
                            }
                        }
                    }
                }
            }
        });
    });
</script>

控制器方法（Laravel）

<?php

namespace App\Http\Controllers;

use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Models\ItMasterHardware;

class HardwareController extends Controller
{
    public function show($ageCategory)
    {
        dd($ageCategory); // Debugging line
        $dateNow = Carbon::now();

        switch ($ageCategory) {
            case 'more-than-4-years':
                $dateLimit = $dateNow->copy()->subYears(4);
                $hardware = ItMasterHardware::where('tgl_beli', '<=', $dateLimit)->get();
                break;

            case '2-3-years':
                $dateLimitStart = $dateNow->copy()->subYears(3);
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case '1-year':
                $dateLimitStart = $dateNow->copy()->subYear();
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case 'under-1-year':
                $dateLimit = $dateNow->copy()->subYear();
                $hardware = ItMasterHardware::where('tgl_beli', '>=', $dateLimit)->get();
                break;

            default:
                abort(404);
        }

        return view('hardware.index', compact('hardware'));
    }
}

已尝试的操作 #

• 使用console.log调试index和category值
• 确保@json Blade指令正确传递PHP变量到JavaScript
• 检查控制台中的JavaScript错误

解决方案 #

问题根源 #

Chart.js v3+版本中，点击事件返回的item数组对象，索引字段为dataIndex而非index。当前代码使用item[0].index会获取到undefined，导致category值异常，最终URL出错。此外，控制器中1-year分支的日期范围顺序错误，会导致查询结果为空。

修复步骤 #

1. 修正点击事件的索引获取
   将var index = item[0].index;改为var index = item[0].dataIndex;，这是获取分段正确索引的关键。

2. 优化分类关联（可选）
   为避免索引与分类的对应关系出错，可在chartData中新增categoryKeys字段，直接与标签绑定：

var chartData = {
    labels: ['4 Tahun', '2-3 Tahun', '1 Tahun', 'Under 1 Tahun'],
    categoryKeys: ['more-than-4-years', '2-3-years', '1-year', 'under-1-year'],
    // 其他数据保持不变
};

点击事件中直接通过索引获取分类：

var category = chartData.categoryKeys[index];

3. 修复控制器日期逻辑
   1-year分支中，whereBetween要求第一个参数为更早的日期，修正顺序：

case '1-year':
    $dateLimitStart = $dateNow->copy()->subYears(2);
    $dateLimitEnd = $dateNow->copy()->subYear();
    $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
    break;

修复后的点击事件代码 #

onClick: function(evt, item) {
    if (item.length > 0) {
        var index = item[0].dataIndex;
        console.log('Index:', index);
        var category = ['more-than-4-years', '2-3-years', '1-year', 'under-1-year'][index];
        console.log('Category:', category);
        window.location.href = `{{ url('/hardware') }}/${category}`;
    }
}

内容的提问来源于stack exchange，提问作者ALDI DAIM FAUZAN