1

我正在尝试通过从我的 c# 代码隐藏动态传递数据来处理 jquery canvasjs 图表。但图表显示不正确。

这是我尝试做的代码

我的客户端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testchartwithoutmaster.aspx.cs" Inherits="WebPages_testchartwithoutmaster" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/js/jquery-ui-1.9.2.js"></script>
    <script type="text/javascript" src="/Scripts/canvasjs.min.js"></script>
    <script type="text/javascript">

    $(function () {
        LoadChart();
    });

    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "testchart.aspx/GetChart",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = eval(r.d);
                var chart = new CanvasJS.Chart("chartContainer",
                    {
                        theme: "theme3",
                        animationEnabled: true,
                        title: {
                            text: "Crude Oil Reserves Vs Production, 2011",
                            fontSize: 30
                        },
                        toolTip: {
                            shared: true
                        },
                        axisY: {
                            title: "billion of barrels"
                        },
                        axisY2: {
                            title: "million barrels/day"
                        },
                        data: [{
                            type: "column",
                            name: "Proven Oil Reserves (bn)",
                            legendText: "Proven Oil Reserves",
                            showInLegend: true,
                            dataPoints: data
                        },
                        {
                            type: "column",
                            name: "Oil Production (million/day)",
                            legendText: "Oil Production",
                            axisYType: "secondary",
                            showInLegend: true,
                            dataPoints: data
                        }],
                        legend: {
                            cursor: "pointer",
                            itemclick: function (e) {
                                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                    e.dataSeries.visible = false;
                                }
                                else {
                                    e.dataSeries.visible = true;
                                }
                                chart.render();
                            }
                        },
                    });
                chart.render();
            }

        });
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="chartContainer" style="height: 500px; width: 50%;">
            </div>
        </div>
    </form>
</body>
</html>

我的服务器端代码：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebPages_testchart : System.Web.UI.Page
{
    [WebMethod]
    public static string GetChart()
    {
        string constr = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = string.Format(@"select 'saudi','11.15' union all
                      select 'venezuela','2.5' union all
                      select 'canada','3.6' union all
                      select 'Iran','4.2' union all
                      select 'Iraq','2.6'");
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = query;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("[");
                    while (sdr.Read())
                    {
                        sb.Append("{");


                        sb.Append(string.Format("label :'{1}', y:'{0}'", sdr[0], sdr[1]));
                        sb.Append("},");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                    sb.Append("]");
                    con.Close();
                    return sb.ToString();
                }
            }
        }
    }
}

以这种方式我尝试过，但它没有正确显示。

4

1 回答 1

2

我遇到了和你一样的问题，它无法立即显示 canvasjS 图表的列数据。

您应该在 ajax 成功之前添加async:false

以下是我的ajax代码

$.ajax({ type: "post", url:$_url, data: { queryDays:parseInt( days) }, async:false, success: function (data) { for(let i=0;i<data.length;i++) { barData[i] = {label:data[i].sitename , y:parseInt( data[i].times),indexLabel:data[i].times}; } }, });

于 2016-11-14T15:15:13.870 回答