如何使用 C 结合 Chart.js 创建动态数据可视化图表？

Chart.js 与 C# 集成指南

简介

Chart.js 是一个简单、灵活的 JavaScript 图表库，用于在网页上创建各种类型的图表，C# 是一种面向对象的编程语言，通常用于构建桌面应用程序和服务器端应用，通过将 Chart.js 与 C# 结合使用，可以在 C# 应用程序中生成动态的、交互式的图表。

环境准备

安装 Visual Studio

1、下载：前往 [Visual Studio 官网](https://visualstudio.microsoft.com/) 下载并安装最新版本的 Visual Studio。

2、安装工作负载：在安装过程中选择“ASP.NET 和 Web 开发”工作负载。

创建一个新的 ASP.NET Core Web 应用

1、启动 Visual Studio。

2、新建项目：点击“创建新项目”，选择“ASP.NET Core Web 应用”。

3、配置项目：输入项目名称和位置，点击“创建”。

4、选择模板：选择“Web 应用 (模型-视图-控制器)”，点击“创建”。

引入 Chart.js

安装 Chart.js

1、打开 NuGet 包管理器：在 Visual Studio 中右键点击解决方案资源管理器中的项目，选择“管理 NuGet 包”。

2、搜索并安装 Chart.js：搜索Chart.js，然后点击“安装”按钮。

在项目中引用 Chart.js

1、添加脚本标签：在_Layout.cshtml 文件中添加以下代码以引用 Chart.js：

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

创建图表

在 Views 文件夹中创建一个新的 Razor 页面

1、添加新的 Razor 页面：右键点击“Views”文件夹，选择“添加”->“新建项”，然后选择“Razor 页面”。

2、命名页面：例如命名为ChartPage.cshtml。

编写 HTML 和 JavaScript 代码

在ChartPage.cshtml 中编写以下代码：

@page
@model YourNamespace.YourModel
<div>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar', // 图表类型
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            '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)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: { scales: { y: { beginAtZero: true } } }
            });
        });
    </script>
</div>

运行项目

1、启动调试：按 F5 或点击“启动”按钮。

2、查看结果：浏览器中应显示一个带有条形图的页面。

相关问题与解答

Q1: 如何在 C# 后端生成数据并在前端显示？

A1: 你可以通过 AJAX 请求从服务器获取数据，在 C# 控制器中创建一个 API 端点返回 JSON 数据，然后在前端使用 AJAX 调用该端点并将返回的数据传递给 Chart.js。

示例 C# 控制器代码：

[ApiController]
[Route("api/[controller]")]
public class DataController : ControllerBase
{
    [HttpGet]
    public IActionResult GetData()
    {
        var data = new[]
        {
            new { label = "Red", value = 12 },
            new { label = "Blue", value = 19 },
            new { label = "Yellow", value = 3 },
            new { label = "Green", value = 5 },
            new { label = "Purple", value = 2 },
            new { label = "Orange", value = 3 }
        };
        return Ok(data);
    }
}

前端 AJAX 请求示例：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                var labels = data.map(item => item.label);
                var values = data.map(item => item.value);
                var ctx = document.getElementById('myChart').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '# of Votes',
                            data: values,
                            backgroundColor: [...], // 根据需要设置颜色
                            borderColor: [...], // 根据需要设置颜色
                            borderWidth: 1
                        }]
                    },
                    options: { scales: { y: { beginAtZero: true } } }
                });
            });
    });
</script>

Q2: 如何自定义图表的样式和行为？

A2: 你可以通过修改Chart.js 的options 对象来自定义图表的样式和行为，你可以更改图表的背景颜色、字体大小、图例位置等，以下是一些常见的自定义选项：

responsive: 设置为true 使图表响应式。

maintainAspectRatio: 设置为false 以允许图表根据容器的大小进行调整。

scales: 自定义坐标轴的外观和行为。

plugins: 添加或配置插件，如工具提示、数据标签等。

示例代码：

var myChart = new Chart(ctx, {
    type: 'bar',
    data: { ... }, // 你的数据
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value, index, values) {
                        return value + ' votes'; // 自定义刻度标签
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.yLabel + ' votes'; // 自定义工具提示内容
                    }
                }
            }
        }
    }
});

以上内容就是解答有关“chart.js c#”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。