使用C#的QuickChart创建图表：列表替换月份标签及数据传递问题

核心思路 #

直接硬编码JSON字符串的方式很难灵活替换内容，推荐用对象序列化生成Config——既能动态传入自定义列表，又能避免手动拼接JSON的格式错误，维护性更强。

实现步骤 #

1. 准备自定义的月份标签列表和对应的数据列表
2. 用匿名对象构建完整的图表配置结构
3. 将对象序列化为JSON字符串，赋值给QuickChart的Config属性

完整代码示例 #

首先确保项目引用Newtonsoft.Json（可通过NuGet安装）：

Install-Package Newtonsoft.Json

替换原有硬编码代码：

using Newtonsoft.Json;
using QuickChart;

// 自定义月份列表
List<string> customMonths = new List<string> { "2024-01", "2024-02", "2024-03", "2024-04" };
// 对应的数据列表
List<int> customData = new List<int> { 45, 78, 92, 66 };

Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";

// 用匿名对象构建图表配置结构
var chartConfig = new
{
    type = "bar",
    data = new
    {
        labels = customMonths,
        datasets = new[]
        {
            new { label = "Dogs", data = customData }
        }
    },
    options = new
    {
        scales = new
        {
            xAxes = new[]
            {
                new
                {
                    scaleLabel = new
                    {
                        display = true,
                        fontColor = "#00ff00",
                        fontSize = 20,
                        fontStyle = "bold",
                        labelString = "Month"
                    }
                }
            },
            yAxes = new[]
            {
                new
                {
                    scaleLabel = new
                    {
                        display = true,
                        labelString = "# Users",
                        fontColor = "#ff0000",
                        fontSize = 20,
                        fontStyle = "bold"
                    }
                }
            }
        }
    }
};

// 序列化为JSON字符串
qc.Config = JsonConvert.SerializeObject(chartConfig);

备选方案：字符串替换（不推荐） #

如果不想引入JSON序列化库，也可以直接替换硬编码的标签部分，但需注意格式匹配：

List<string> customMonths = new List<string> { "2024-01", "2024-02", "2024-03", "2024-04" };
// 将列表转为JSON格式字符串
string labelsJson = $"['{string.Join("', '", customMonths)}']";

Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";

// 替换原Config中的固定标签部分
string originalConfig = @"{
                          type: 'bar',
                          data: {
                            labels: ['January', 'February', 'March', 'April', 'May'],
                            datasets: [
                              { label: 'Dogs', data: [50, 60, 70, 180, 190] },
                            ],
                          },
                          options: {
                          scales: {
                            xAxes: [
                              {
                                scaleLabel: {
                                  display: true,
                                  fontColor: '#00ff00',
                                  fontSize: 20,
                                  fontStyle: 'bold',
                                  labelString: 'Month',
                                },
                              },
                            ],
                            yAxes: [
                              {
                                scaleLabel: {
                                  display: true,
                                  labelString: '# Users',
                                  fontColor: '#ff0000',
                                  fontSize: 20,
                                  fontStyle: 'bold',
                                },
                              },
                            ]
                          }
                        }
                        }";
qc.Config = originalConfig.Replace("['January', 'February', 'March', 'April', 'May']", labelsJson);

注意：这种方式如果自定义列表包含单引号等特殊字符，会直接导致JSON格式错误，仅适合简单场景。

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