.NET Core MVC中如何基于最新库动态实现饼图及各类图表

一、动态饼图实现（基于Chart.js v4+） #

主流方案是后端提供动态数据，前端用Chart.js渲染，步骤如下：

1. 定义数据模型与后端接口 #

创建存储图表数据的模型类，在Controller中准备动态数据（可从数据库/业务逻辑获取）：

// 数据模型
public class ChartItem
{
    public string Label { get; set; }
    public int Value { get; set; }
}

// Controller方法
public IActionResult PieChart()
{
    // 模拟动态数据，实际替换为业务数据
    var pieData = new List<ChartItem>
    {
        new ChartItem { Label = "产品A", Value = 35 },
        new ChartItem { Label = "产品B", Value = 25 },
        new ChartItem { Label = "产品C", Value = 40 }
    };
    return View(pieData);
}

2. 前端View渲染饼图 #

在View中引入Chart.js，通过Razor语法将后端数据序列化为JSON，渲染饼图：

@model List<ChartItem>

<div>
    <canvas id="pieChart" width="400" height="400"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('pieChart').getContext('2d');
    const labels = @Json.Serialize(Model.Select(x => x.Label));
    const values = @Json.Serialize(Model.Select(x => x.Value));

    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: '产品销量占比',
                data: values,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)'
                ]
            }]
        }
    });
</script>

二、借助最新类库实现各类图表 #

1. 前端可视化类库（推荐） #

Chart.js v4+

支持饼图、柱状图、折线图、雷达图等全品类图表，切换type参数即可快速切换图表类型：

// 示例：动态生成柱状图
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: '产品销量',
            data: values,
            backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
    },
    options: {
        scales: {
            y: { beginAtZero: true }
        }
    }
});

Apache ECharts v5+

适合复杂可视化场景（如地图、热力图），用法类似：

@model List<ChartItem>

<div id="barChart" style="width: 600px; height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    const chartDom = document.getElementById('barChart');
    const myChart = echarts.init(chartDom);
    const option = {
        xAxis: {
            type: 'category',
            data: @Json.Serialize(Model.Select(x => x.Label))
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: @Json.Serialize(Model.Select(x => x.Value)),
            type: 'bar'
        }]
    };
    myChart.setOption(option);
</script>

2. 后端渲染类库（生成图片） #

若需直接生成图表图片（如导出报表），使用ScottPlot v5+（.NET开源图表库）：

步骤1：安装NuGet包

Install-Package ScottPlot

步骤2：后端生成图片接口

public IActionResult GeneratePieChartImage()
{
    var plt = new ScottPlot.Plot(600, 400);

    // 动态数据
    double[] values = { 35, 25, 40 };
    string[] labels = { "产品A", "产品B", "产品C" };

    var pie = plt.AddPie(values);
    pie.Labels = labels;
    pie.ShowLabels = true;

    using var ms = new MemoryStream();
    plt.SavePng(ms);
    ms.Position = 0;
    return File(ms, "image/png");
}

步骤3：前端展示图片

<img src="/Home/GeneratePieChartImage" alt="动态饼图" />

三、关键注意事项 #

• 动态数据：将示例中的模拟数据替换为从数据库、API或业务逻辑获取的实时数据。
• 性能优化：大数据量场景下，前端需做数据聚合/分页；后端生成图片需控制内存占用。
• 样式定制：参考对应类库文档，修改颜色、tooltip、图例等配置以适配业务需求。

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