Blazor怎么使用Chart.js绘制图表

来源：站长平台作者：南京GEO公司头衔：草根站长
导读：本期聚焦于小伙伴创作的《Blazor怎么使用Chart.js绘制图表》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《Blazor怎么使用Chart.js绘制图表》有用，将其分享出去将是对创作者最好的鼓励。

Blazor是微软推出的基于.NET的前端框架，允许开发者使用C#编写前端逻辑，而Chart.js是一款简单易用的JavaScript图表库，支持多种图表类型。在Blazor项目中使用Chart.js绘制图表，需要结合Blazor的JavaScript互操作能力，让C#代码可以调用Chart.js的相关功能。

Blazor怎么使用Chart.js绘制图表

环境准备

首先需要在Blazor项目中引入Chart.js的库文件，推荐通过CDN的方式引入，在项目的wwwroot/index.html（Blazor WebAssembly）或者Pages/_Host.cshtml（Blazor Server）的<head>标签中添加如下引用：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

同时需要创建一个JavaScript文件，用于封装Chart.js的初始化、更新等操作，方便Blazor通过互操作调用。在wwwroot目录下创建chartInterop.js文件，内容如下：

// 存储已创建的图表实例
const chartInstances = {};

// 初始化图表
function initChart(canvasId, chartType, chartData, chartOptions) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) {
        console.error(`未找到id为${canvasId}的画布元素`);
        return;
    }
    const ctx = canvas.getContext('2d');
    // 如果已存在同id的图表，先销毁
    if (chartInstances[canvasId]) {
        chartInstances[canvasId].destroy();
    }
    // 创建新图表实例
    chartInstances[canvasId] = new Chart(ctx, {
        type: chartType,
        data: chartData,
        options: chartOptions
    });
    return canvasId;
}

// 更新图表数据
function updateChartData(canvasId, newData) {
    const chart = chartInstances[canvasId];
    if (!chart) {
        console.error(`未找到id为${canvasId}的图表实例`);
        return;
    }
    chart.data = newData;
    chart.update();
}

创建Blazor互操作服务

为了方便在Blazor组件中调用上面的JavaScript方法，我们可以创建一个对应的C#服务类。在项目中创建ChartInteropService.cs文件：

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class ChartInteropService
{
    private readonly IJSRuntime _jsRuntime;

    public ChartInteropService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    /// <summary>
    /// 初始化图表
    /// </summary>
    /// <param name="canvasId">画布元素id</param>
    /// <param name="chartType">图表类型</param>
    /// <param name="chartData">图表数据</param>
    /// <param name="chartOptions">图表配置</param>
    public async Task InitChartAsync(string canvasId, string chartType, object chartData, object chartOptions)
    {
        await _jsRuntime.InvokeVoidAsync("initChart", canvasId, chartType, chartData, chartOptions);
    }

    /// <summary>
    /// 更新图表数据
    /// </summary>
    /// <param name="canvasId">画布元素id</param>
    /// <param name="newData">新的图表数据</param>
    public async Task UpdateChartDataAsync(string canvasId, object newData)
    {
        await _jsRuntime.InvokeVoidAsync("updateChartData", canvasId, newData);
    }
}

然后在Program.cs中注册这个服务，方便后续依赖注入使用：

builder.Services.AddScoped<ChartInteropService>();

绘制基础折线图

接下来我们创建一个Blazor组件，实现折线图的绘制。创建一个LineChart.razor组件：

@page "/line-chart"
@inject ChartInteropService ChartInterop

<h3>Blazor折线图示例</h3>
<canvas id="lineChartCanvas" width="800" height="400"></canvas>

@code {
    private string canvasId = "lineChartCanvas";

    // 图表数据
    private object chartData = new
    {
        labels = new[] { "一月", "二月", "三月", "四月", "五月", "六月" },
        datasets = new[]
        {
            new
            {
                label = "销售额",
                data = new[] { 120, 190, 300, 500, 200, 300 },
                borderColor = "rgb(75, 192, 192)",
                backgroundColor = "rgba(75, 192, 192, 0.2)",
                tension = 0.1
            }
        }
    };

    // 图表配置
    private object chartOptions = new
    {
        responsive = true,
        plugins = new
        {
            title = new
            {
                display = true,
                text = "上半年销售额趋势"
            }
        }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化折线图
            await ChartInterop.InitChartAsync(canvasId, "line", chartData, chartOptions);
        }
    }
}

运行项目访问/line-chart页面，就可以看到绘制好的折线图。这里需要注意，图表初始化要放在OnAfterRenderAsync方法中，并且firstRender为true的时候执行，确保DOM元素已经渲染完成，JavaScript可以正常获取到画布元素。

绘制柱状图与动态更新数据

除了折线图，我们也可以很方便地绘制柱状图，并且实现数据的动态更新。创建BarChart.razor组件：

@page "/bar-chart"
@inject ChartInteropService ChartInterop

<h3>Blazor柱状图示例</h3>
<canvas id="barChartCanvas" width="800" height="400"></canvas>
<button class="btn btn-primary" @onclick="UpdateChart">更新数据</button>

@code {
    private string canvasId = "barChartCanvas";
    private Random random = new Random();

    private object chartData = new
    {
        labels = new[] { "产品A", "产品B", "产品C", "产品D", "产品E" },
        datasets = new[]
        {
            new
            {
                label = "销量",
                data = new[] { 50, 80, 120, 90, 150 },
                backgroundColor = new[]
                {
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)"
                },
                borderColor = new[]
                {
                    "rgb(255, 99, 132)",
                    "rgb(54, 162, 235)",
                    "rgb(255, 206, 86)",
                    "rgb(75, 192, 192)",
                    "rgb(153, 102, 255)"
                },
                borderWidth = 1
            }
        }
    };

    private object chartOptions = new
    {
        responsive = true,
        scales = new
        {
            y = new
            {
                beginAtZero = true
            }
        }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await ChartInterop.InitChartAsync(canvasId, "bar", chartData, chartOptions);
        }
    }

    private async Task UpdateChart()
    {
        // 生成新的随机数据
        var newData = new
        {
            labels = new[] { "产品A", "产品B", "产品C", "产品D", "产品E" },
            datasets = new[]
            {
                new
                {
                    label = "销量",
                    data = new[]
                    {
                        random.Next(30, 200),
                        random.Next(30, 200),
                        random.Next(30, 200),
                        random.Next(30, 200),
                        random.Next(30, 200)
                    },
                    backgroundColor = new[]
                    {
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 206, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)"
                    },
                    borderColor = new[]
                    {
                        "rgb(255, 99, 132)",
                        "rgb(54, 162, 235)",
                        "rgb(255, 206, 86)",
                        "rgb(75, 192, 192)",
                        "rgb(153, 102, 255)"
                    },
                    borderWidth = 1
                }
            }
        };
        await ChartInterop.UpdateChartDataAsync(canvasId, newData);
    }
}

点击更新数据按钮，就可以看到柱状图的数据会随机变化，实现动态更新的效果。如果需要绘制其他类型的图表，只需要把InitChartAsync方法中的第二个参数改成对应的图表类型即可，比如pie是饼图，doughnut是环形图，radar是雷达图。

常见问题说明

  • 如果图表没有正常显示，首先检查Chart.js的CDN引用是否成功，然后检查chartInterop.js是否正确引入，在index.html或_Host.cshtml中添加<script src="chartInterop.js"></script>引用。
  • Blazor Server项目中，JavaScript互操作是异步的，不要在OnInitialized方法中直接初始化图表，因为此时DOM还没有渲染完成，会导致获取不到画布元素。
  • 如果需要在图表中显示中文，确保Chart.js的版本支持中文显示，一般最新版本都默认支持，不需要额外配置。

BlazorChart_js图表绘制JavaScript互操作修改时间：2026-07-09 21:06:50

免责声明：​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。

上一篇c# TaskCreationOptions 枚举有什么用

下一篇C#怎么合并两个DataTable？C#如何实现数据表拼接？

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

负责任网站 - 免责声明 - 隐私政策 - 网站地图

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.