Blazor Server应用无法使用Chart JS Zoom插件问题求助

环境信息 #

• .NET 7.0
• ChartJS 4.4.0
• Zoom插件 2.0.1

已完成配置 #

1. _Host.cshtml中引入的JS文件 #

<script src="~/js/hammerjs.js"> </script>
<script src="~/lib/Chart.js/dist/chart.umd.min.js" type="module"></script>
<script src="~/lib/Chart.js/chart-plugin-zoom.js" type="module"></script>
<script src="~/js/chartInit.js"> </script>

2. Chart组件代码 #

@inject IJSRuntime JSRuntime

<div style="width:1000px; height:1000px;">
    <canvas id="@Id"></canvas>
</div>


@code {
    public enum ChartType
    {
        Pie,
        Bar,
        Line
    }

    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public ChartType Type { get; set; }

    [Parameter]
    public string[] Labels { get; set; }

    [Parameter]
    public object[] Dataset { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var config = new
        {
            type = Type.ToString().ToLower(),
            options = new
            {
                responsive = true,
                spanGaps = true,
            },
            scales = new
            {
                x = new
                {
                    type = "time"
                },
                y = new
                {
                    beginAtZero = true
                }
            },
            data = new
            {
                Datasets = Dataset,
                Labels = Labels
            },
            plugins = new
            {
                zoom = new
                {
                    pan = new
                    {
                        enabled = true,
                        mode = "x"
                    },
                    zoom = new
                    {
                        wheel = new
                        {
                            enabled = true
                        },
                        mode = "x",
                        drag = new
                        {
                            enabled = true
                        }
                    }
                }
            }
        };

        await JSRuntime.InvokeVoidAsync("console.log", config);
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }
}

3. 组件使用代码 #

<Chart Id="pie1" Type="@Chart.ChartType.Line"
       Dataset="@(new[] {
                            new JsChart_LineDataSet("1","blue",new List<float>(){4.0f, 6.0f, 9.0f, 12.0f,5f,9f}),
                            new JsChart_LineDataSet("2","green",new List<float>(){14.0f, 8.0f, 4.0f, 15.0f,11f,9f}),
                            new JsChart_LineDataSet("3","red",new List<float>(){12.0f, 3.0f, 7.0f, 35.0f,26f,22f}),
                            new JsChart_LineDataSet("4","orange",new List<float>(){1.0f, 12.0f, 3.0f, 6.0f,12f,24f})
                        }
               )"
       Labels="@(new[] { "0.1" , "0.2", "0.3", "0.4","0.5","0.6" })">
</Chart>

4. 辅助类代码 #

public class JsChart_LineDataSet
{
    public string label { get; set; }
    public string backgroundColor { get; set; }
    public string borderColor { get; set; }
    public List<float> data { get; set; }

    public JsChart_LineDataSet(string label, string backgroundColor, List<float> data)
    {
        this.label = label;
        this.backgroundColor = backgroundColor;
        this.data = data;
        this.borderColor = backgroundColor;
    }
}

当前问题 #

图表可正常渲染，但缩放、平移功能完全无效，浏览器控制台无任何报错或警告。

解决方案 #

1. 修正Zoom插件配置层级 #

ChartJS 4.x要求Zoom插件的配置必须放在options.plugins下，而非根级plugins。调整组件中的config对象：

var config = new
{
    type = Type.ToString().ToLower(),
    options = new
    {
        responsive = true,
        spanGaps = true,
        // 将Zoom配置移到options.plugins节点下
        plugins = new
        {
            zoom = new
            {
                pan = new
                {
                    enabled = true,
                    mode = "x"
                },
                zoom = new
                {
                    wheel = new
                    {
                        enabled = true
                    },
                    mode = "x",
                    drag = new
                    {
                        enabled = true
                    }
                }
            }
        }
    },
    scales = new
    {
        x = new
        {
            type = "time"
        },
        y = new
        {
            beginAtZero = true
        }
    },
    data = new
    {
        Datasets = Dataset,
        Labels = Labels
    }
    // 移除根级的plugins节点
};

2. 修复x轴类型与数据不匹配问题 #

你配置x轴为time类型，但传入的Labels是字符串格式的小数（如"0.1"），会导致时间轴解析异常，进而影响Zoom交互：

• 如果不是时间数据：直接删除x轴的type = "time"配置
• 如果是时间数据：将Labels转换为合法的时间格式（如ISO 8601字符串）

3. 统一模块引入并显式注册插件 #

当前引入的脚本模块类型不一致，会导致依赖加载异常。修改_Host.cshtml中的脚本引入：

<script src="~/js/hammerjs.js" type="module"></script>
<script type="module">
    import Chart from '~/lib/Chart.js/dist/chart.umd.min.js';
    import zoomPlugin from '~/lib/Chart.js/chart-plugin-zoom.js';
    
    // 显式注册Zoom插件
    Chart.register(zoomPlugin);
    
    window.setup = (id, config) => {
        const ctx = document.getElementById(id).getContext('2d');
        new Chart(ctx, config);
    };
</script>

4. 避免重复初始化图表 #

Blazor的OnAfterRenderAsync会多次触发，需限制仅首次渲染时初始化图表：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (!firstRender) return;
    
    // 原初始化代码...
}

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