Question

我目前正致力于在ASP.NET开发的网站上使用 Google Charts API实现条形图。我已设法显示带有值的图表。我从后端数据库中获取这些值。值如下;

课程：在

中设置为零售

升级：在数据库中设置为 120

现在我遇到的问题是当条形图在页面上显示时如下：

enter image description here

课程获得进展值。

将数据绑定到图表代码位于

之下

private void BindChart()
{
    DataTable dsChartData = new DataTable();
    StringBuilder strScript = new StringBuilder();

    try
    {
        dsChartData = GetChartData();

        strScript.Append(@"<script type='text/javascript'>  
                google.load('visualization', '1', {packages: ['corechart']}); </script>  

                <script type='text/javascript'>  

                function drawChart() {         
                var data = google.visualization.arrayToDataTable([  
                ['Progression', 'Course'],");

        foreach (DataRow row in dsChartData.Rows)
        {
            strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],");
        }
        strScript.Remove(strScript.Length - 1, 1);
        strScript.Append("]);");

        strScript.Append(@" var options = {     
                                hAxis: {
                                viewWindow: {
                                min: 0,
                                max: 100
                                },
                                ticks: [0, 25, 50, 75, 100],
                                },
                                title: 'My Progression (%)'      
                                };   ");

        strScript.Append(@"var chart = new google.visualization.BarChart(document.getElementById('barchart'));          
                            chart.draw(data, options);        
                            }    
                        google.setOnLoadCallback(drawChart);  
                        ");
        strScript.Append(" </script>");

        ltScripts.Text = strScript.ToString();
    }
    catch
    {
    }
    finally
    {
        dsChartData.Dispose();
        strScript.Clear();
    }
}

要使用以下代码从数据库中获取数据

private DataTable GetChartData()
{
    string UsrName = User.Identity.Name;
    DataSet dt = new DataSet();
    try
    {
        using (SqlConnection conn = new SqlConnection(Common.ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT Progression,Course FROM Messages where UserName=@UserName"))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    SqlParameter para = new SqlParameter("UserName", UsrName);
                    cmd.Parameters.Add(para);
                    cmd.Connection = conn;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                }
            }
        }
    }
    catch (Exception)
    {
        throw;
    }
    return dt.Tables[0];
}

提前感谢您的帮助

Answer 1

您正在向后引用列。

在这里，您首先指定了“进程”，然后是“课程”：

strScript.Append(@"<script type='text/javascript'>  
        google.load('visualization', '1', {packages: ['corechart']}); </script>  

        <script type='text/javascript'>  

        function drawChart() {         
        var data = google.visualization.arrayToDataTable([  
        ['Progression', 'Course'],");

但是你的循环在“进程”栏中追加“课程”数据，在“课程”栏中追加“进展数据”：

foreach (DataRow row in dsChartData.Rows)
{
    strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],");
}

翻转它们。此外，访问DataRow中的列会将值返回为object，因此可能无法确定底层值应该是什么。解析数值。

foreach (DataRow row in dsChartData.Rows)
{
    strScript.Append("[" + int.Parse(row["Progression"]) + ",'" + row["Course"] + "'],");
}

还有一件事......根据docs，您应该将false传递给对arrayToDataTable()的调用，以指示第一行包含标签。改变这个：

strScript.Append("]);");

对此：

strScript.Append("], false);");

Answer 2

我认为你们大部分都在那里，但是你需要在数组的开头交换列名，然后保持原样：

strScript.Append(@"[...]
      var data = google.visualization.arrayToDataTable([  
            ['Course', 'Progression'],");

foreach (DataRow row in dsChartData.Rows)
{
  strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],");
}

您可以在this fiddle上看到这一点：

Correct labels

如果这不起作用，那么尝试在页面上发布实际渲染的JS - 如果你说图形根本没有呈现，你可能在最终的JS中出错 - 检查你的浏览器控制台与错过关闭字符串等相关的错误

Answer 3

你以不好的方式添加参数。（我想你正在编写桌面应用程序而你正在使用Parameters.AddWithValue（）方法。它与Parameters.Add（）

略有不同

试试这样：

SqlCommand command = new SqlCommand(commandText, connection);
command.Parameters.Add("@ID", SqlDbType.Int);
command.Parameters["@ID"].Value = customerID;

值被分配给错误的标签

3 个答案: