使用Javascript和Asp.net通过AJAX调用D3图表设置数据

Question

我正在尝试使用AJAX调用为D3jS设置数据。

这是我的C＃方法，它返回一个JSON字符串。

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetData()
        {
            string jsonstring = string.Empty;
            string sessionId = string.Empty;
            try
            {   
                sessionId = GetDataSet.GetSessionId();
                var doc = GetDataSet.GenerateXDocument(ConfigurationManager.AppSettings["dashboard"], sessionId);
                jsonstring = GetDataSet.ConvertToJson(doc);

            }
            catch
            {
            }
            finally
            {
                var obj = new SAWSessionServiceSoapClient();
                obj.logoff(sessionId);
            }
            return jsonstring;

        }

这是我的HTML

<div id="ReportContent" runat="server" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);"> </div>

我的JavaScript代码如下

var data = [{ "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Deposits", "Actual": 330393232.5, "Forecast": 495589848.75, "Target": 495589848.75 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Fee Based", "Actual": 111868709.42, "Forecast": 167803064.13, "Target": 167803064.13 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Lending", "Actual": 18146873.33, "Forecast": 27220309.995, "Target": 27220309.995 }];

        PageMethods.GetData(OnSucceeded, OnFailed);

        function OnSucceeded(result) {

            data = result;
            CreateChart();
        }

        function OnFailed(error) {
            alert(error.id);
        }

        function CreateChart() {

        var color = d3.scale.linear()
            .domain([0, d3.max(data, function (d) {return d.Actual;})]) //change
            .range(["#f3c40e", "#7d6507"]);

        var width = 420,
            margin = 100, //add
            barHeight = 20;

        var x = d3.scale.linear()
            .domain([0, d3.max(data, function (d) {return d.Actual;})]) //change
            .range([0, width]);

        var chart = d3.select('#ReportContent').append('svg')
            .attr("width", width + margin)
            .attr("height", barHeight * data.length);



            var bar = chart.selectAll("g")
                .data(data, function(d) { return d.Actual; })
                .enter().append("g")
                .attr("transform", "translate(0," + barHeight + ")");


            bar.append("rect")
                .attr("width", function(d) { return x(d.Actual); }) //change
                .attr("height", function(d) {
                    return d.product == "Deposits" ? 10 : barHeight;
                })
                .attr("fill", function(d) { return color(d.Actual); }); //change

            bar.append("text")
                .attr("text-anchor", "end") //add
                .attr("x", function(d) { return x(d.Actual); }) //change
                .attr("y", barHeight / 2)
                .attr("dy", ".35em")
                .text(function(d) { return d.Product; });
        }

现在我的问题是，当我设置静态JSON字符串时，代码工作，我能够得到我的简单条形图，但是当我尝试使用AJAX请求时，它会失败。需要注意的是，一旦AJAX请求完成且数据可用，我就会调用负责创建D3简单条形图的代码。我调试了代码以检查我是否能够获取数据的JSON字符串并且是肯定的。唯一的问题是我没有看到任何图表被创建。我不确定我现在该做什么：（

编辑：

以下代码对我有用。

var data;
        PageMethods.GetData(OnSucceeded, OnFailed);

        function OnSucceeded(result) {
           // $x(document.getElementById("ReportContent_ReportContent")).innerHTML = "<div id='ajax_loading'> <img src='../Images/ajax-loader.gif' id='ajaxLoader' alt='loading...' title='Loading...' /></div>";
            //alert('success');
            data =JSON.parse(result);
            ChartCreate();
        }

        function OnFailed(error) {
            alert(error.id);
        }

        function ChartCreate() {
            var color = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.Actual; })]) //change
                .range(["#f3c40e", "#7d6507"]);

            var width = 420,
                margin = 100, //add
                barHeight = 20;

            var x = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.Actual; })]) //change
                .range([0, width]);

            var chart = d3.select('#ReportContent_ReportContent svg')
                .attr("width", width + margin)
                .attr("height", barHeight * data.length);

            var bar = chart.selectAll("g")
                .data(data, function(d) { return d.Actual; })
                .enter().append("g")
                .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

            bar.append("rect")
                .attr("width", function(d) { return x(d.Actual); }) //change
                .attr("height", barHeight) //change
                .attr("fill", function(d) { return color(d.Actual); }); //change

            bar.append("text")
                .attr("text-anchor", "start") //add
                .attr("x", function(d) { return x(d.Actual); }) //change
                .attr("y", barHeight / 2)
                .attr("dy", ".35em")
                .text(function(d) { return d.Product; });
        }