在SvelteKit中使用Chart.js无法渲染图表，是否遗漏必要配置？

你的问题核心出在Canvas尺寸配置和Chart.js的响应式设置上，以下是具体修正方案：

问题根源 #

1. Canvas实际像素尺寸过小：你给canvas设置了width={32} height={32}，这是画布的底层绘制像素尺寸——即便CSS把它拉伸到100%，图表的绘制区域依然只有32x32像素，导致内容无法正常显示。
2. 缺少响应式配置：Chart.js默认需要手动开启响应式，才能适配容器的尺寸变化。
3. 实例引用可能被回收：onMount内部声明的chart变量可能被垃圾回收，导致图表无法持续渲染。

修改后的完整代码 #

<script>
    import { onMount, onDestroy } from 'svelte';
    import Chart from 'chart.js/auto';

    let data = [20, 100, 50, 12, 20, 130, 45];
    let labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    let canvas;
    let chart; // 顶层变量保留图表实例，避免被垃圾回收

    onMount(() => {
        const ctx = canvas.getContext('2d');
        chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Unit Sales',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.6)' // 给柱子加背景色，避免和灰色canvas混淆
                    }
                ]
            },
            options: {
                responsive: true, // 开启响应式，适配容器尺寸
                maintainAspectRatio: false, // 允许自定义高度，配合CSS设置
                scales: {
                    y: {
                        beginAtZero: true // Y轴从0开始，数据展示更直观
                    }
                }
            }
        });
    });

    onDestroy(() => {
        chart?.destroy(); // 组件销毁时清理图表，防止内存泄漏
    });
</script>

<canvas bind:this={canvas} />

<style>
    canvas {
        width: 100%;
        height: 400px; /* 设置明确高度，也可通过父容器控制尺寸 */
        background-color: #666;
    }
</style>

关键修改说明 #

• 移除canvas的width和height属性，让Chart.js根据响应式配置自动处理绘制尺寸。
• 将chart变量提升到script顶层，确保实例不会被垃圾回收。
• 开启responsive: true和maintainAspectRatio: false，让图表灵活适配容器大小。
• 可选添加柱子背景色，方便快速确认图表是否渲染成功。
• 添加onDestroy钩子销毁图表，避免长期运行产生内存泄漏。

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