ASP.NET：如何将图表动态绑定SqlDataSource，按地点生成多数据系列？

首先得先修正你现有的SqlDataSource——它的查询语句没有关联locationList表，这样拿不到地点名称，第一步先把查询改对：

<asp:SqlDataSource ID="SQL_DataSource_DB" runat="server" 
    ConnectionString="<%$ ConnectionStrings:myConn %>" 
    SelectCommand="SELECT m.Temperature, m.Timestamp, l.Location_Name 
                   FROM dbo.measurements m
                   INNER JOIN dbo.locationList l ON m.Location_FK = l.Location_ID">
</asp:SqlDataSource>

接下来，我们用ASP.NET自带的Chart控件来实现动态生成数据系列，有两种常用方式，你可以根据需求选择：

方式一：结合SqlDataSource后台动态生成系列 #

这种方式保留你现有的SqlDataSource，在后台代码中处理数据分组和系列创建：

1. 先在aspx页面添加Chart控件 #

<asp:Chart ID="TemperatureChart" runat="server" Width="800px" Height="500px">
    <ChartAreas>
        <asp:ChartArea Name="MainChartArea">
            <AxisX Title="时间戳" LabelStyle-Format="dd/MM/yyyy HH:mm:ss" IntervalType="DateTime">
                <LabelStyle Angle="-45" /> <!-- 倾斜标签避免重叠 -->
            </AxisX>
            <AxisY Title="温度(°C)" />
        </asp:ChartArea>
    </ChartAreas>
    <Legends>
        <asp:Legend Name="LocationLegend" Docking="Bottom" />
    </Legends>
</asp:Chart>

2. 后台C#代码处理绑定 #

在页面的Page_Load事件或者专门的绑定方法中，实现按地点分组并生成系列：

using System.Data;
using System.Web.UI.DataVisualization.Charting;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDynamicChartSeries();
    }
}

private void BindDynamicChartSeries()
{
    // 从SqlDataSource获取完整数据集
    DataView dataView = (DataView)SQL_DataSource_DB.Select(DataSourceSelectArguments.Empty);
    DataTable fullData = dataView.ToTable();

    // 获取所有唯一的地点名称（去重）
    DataTable uniqueLocations = fullData.DefaultView.ToTable(true, "Location_Name");

    // 定义一组区分颜色，避免系列颜色重复
    Color[] seriesColors = { Color.RoyalBlue, Color.ForestGreen, Color.Crimson, Color.Orange, Color.Purple };
    int colorIndex = 0;

    foreach (DataRow locationRow in uniqueLocations.Rows)
    {
        string locationName = locationRow["Location_Name"].ToString();
        
        // 创建新的数据系列
        Series locationSeries = new Series(locationName);
        locationSeries.ChartType = SeriesChartType.Line; // 可改为Column、Spline等类型
        locationSeries.Color = seriesColors[colorIndex % seriesColors.Length];
        colorIndex++;

        // 指定系列的X/Y轴字段
        locationSeries.XValueMember = "Timestamp";
        locationSeries.YValueMembers = "Temperature";

        // 过滤当前地点的数据
        locationSeries.FilterExpression = "Location_Name = '{0}'";
        locationSeries.FilterParameters.Add(new Parameter("Location", TypeCode.String, locationName));

        // 将系列添加到图表
        TemperatureChart.Series.Add(locationSeries);
    }

    // 绑定数据源到图表
    TemperatureChart.DataSource = fullData;
    TemperatureChart.DataBind();
}

方式二：直接后台查询并分组数据（更灵活） #

如果数据量较大或者需要更复杂的处理，建议直接在后台查询数据库，手动分组创建系列：

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI.DataVisualization.Charting;

private void BindChartWithDirectQuery()
{
    string connString = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString;
    DataTable fullData = new DataTable();

    // 查询关联后的完整数据
    using (SqlConnection conn = new SqlConnection(connString))
    {
        string query = @"SELECT m.Temperature, m.Timestamp, l.Location_Name 
                         FROM dbo.measurements m
                         INNER JOIN dbo.locationList l ON m.Location_FK = l.Location_ID";
        SqlDataAdapter adapter = new SqlDataAdapter(query, conn);
        adapter.Fill(fullData);
    }

    // 按地点分组数据
    var groupedData = fullData.AsEnumerable().GroupBy(row => row.Field<string>("Location_Name"));

    Color[] seriesColors = { Color.RoyalBlue, Color.ForestGreen, Color.Crimson, Color.Orange, Color.Purple };
    int colorIndex = 0;

    foreach (var locationGroup in groupedData)
    {
        Series locationSeries = new Series(locationGroup.Key);
        locationSeries.ChartType = SeriesChartType.Line;
        locationSeries.Color = seriesColors[colorIndex % seriesColors.Length];
        colorIndex++;

        // 逐个添加数据点
        foreach (DataRow row in locationGroup)
        {
            DateTime timestamp = row.Field<DateTime>("Timestamp");
            double temperature = row.Field<double>("Temperature");
            locationSeries.Points.AddXY(timestamp, temperature);
        }

        TemperatureChart.Series.Add(locationSeries);
    }
}

关键注意事项 #

• 时间戳类型：确保数据库中Timestamp字段是DateTime类型，如果是字符串，需要先转换为DateTime（比如DateTime.Parse(row["Timestamp"].ToString())），否则X轴排序会混乱。
• 数据量优化：如果数据量极大，建议添加时间范围过滤（比如WHERE Timestamp >= @StartDate AND Timestamp <= @EndDate），避免图表加载过慢。
• 系列样式：可以根据需求修改ChartType（折线图、柱状图等），或者添加标记点、调整线条粗细等样式。

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