ASP.NET Web Forms中HighCharts动态数据绑定问题求助

1. 完善后台数据处理逻辑 #

先修改后台方法，同时整理x轴分类（区县名称）和series所需的动态数据，将整个图表配置结构序列化为JSON：

// 定义对应HighCharts Series结构的类
public class ChartSeries
{
    public string name { get; set; }
    public List<int> data { get; set; }
}

protected string GetChartData()
{
    DataTable dt = objBO.Get_MSME_Chart_Data(new object[] { null });
    
    // 提取区县名称作为x轴分类，去重避免重复项
    List<string> districts = dt.AsEnumerable()
                               .Select(row => row["DISTRICT_NAME"].ToString())
                               .Distinct()
                               .ToList();
    
    // 从DataTable中提取各年份的MSME数量，生成series数据
    // 注意：以下字段名（如YEAR_1990）需和你的数据库实际字段匹配
    List<ChartSeries> seriesList = new List<ChartSeries>();
    seriesList.Add(new ChartSeries
    {
        name = "Year 1990",
        data = dt.AsEnumerable()
                 .Select(row => Convert.ToInt32(row["YEAR_1990"]))
                 .ToList()
    });
    seriesList.Add(new ChartSeries
    {
        name = "Year 2000",
        data = dt.AsEnumerable()
                 .Select(row => Convert.ToInt32(row["YEAR_2000"]))
                 .ToList()
    });
    seriesList.Add(new ChartSeries
    {
        name = "Year 2018",
        data = dt.AsEnumerable()
                 .Select(row => Convert.ToInt32(row["YEAR_2018"]))
                 .ToList()
    });
    
    // 包装成HighCharts需要的完整数据结构
    var chartData = new
    {
        categories = districts,
        series = seriesList
    };
    
    // 序列化为无格式JSON，减少前端解析问题
    return JsonConvert.SerializeObject(chartData, Formatting.None);
}

2. 前端JS绑定动态数据 #

在ASPX页面的JS代码中，直接通过<%= GetChartData() %>获取后台生成的JSON数据，无需额外解析：

// 获取后台传递的完整图表数据
var chartConfigData = <%= GetChartData() %>;

Highcharts.chart('highcharts1', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Number of MSMEs By District',
        align: 'left'
    },
    xAxis: {
        categories: chartConfigData.categories, // 绑定动态区县分类
        title: {
            text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Number of MSMEs',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    tooltip: {
        valueSuffix: '' // 根据实际数据调整后缀
    },
    plotOptions: {
        bar: {
            borderRadius: '50%',
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: chartConfigData.series // 绑定动态series数据
});

3. 关键注意事项 #

• 确保后台DataTable的字段名称和前端使用的完全匹配，比如年份字段需对应数据库实际列名
• 若出现JS语法错误，可查看页面源码，确认<%= GetChartData() %>输出的是合法JSON
• 如果需要异步加载数据，可改用ASP.NET WebMethod配合AJAX调用，但Web Forms中直接使用<%= %>是最简便的同步绑定方式

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