Question

在c＃codebehind中，我用这种方式定义了一些列表：

public List<string> divs = new List<string>();
public List<List<string>> names = new List<List<string>>();
public List<List<List<string>>> labels = new List<List<List<string>>>();
public List<List<List<double>>> longitude = new List<List<List<double>>>();

我知道相当大的列表，但我认为有必要从我的来源正确组织我的所有信息。

在JS中我将这些序列化如下：

var divArr = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(divs)%>;
var names = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(names)%>;
var lbl = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(labels)%>;
var long = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(longitude)%>;

然后我尝试做一个函数在不同的图上绘制所有这些。我的页面上总共有10个图表，所有这些图表都有几行。试图让我的页面尽可能动态。所以我有一个函数来遍历所有这些并尝试绘制所有这些。

function doGraph(){
    for(index = 0; index < divArr.length; ++index){
        (function() {

            var data = [];
            for(indx = 0; indx < lbl[index].length; ++indx){
                var trace = {
                    name: names[index][indx],
                    x: lbl[index][indx],
                    y: long[index][indx],
                    mode:'lines'
                };
                data.push(trace);
            }

            var gd = document.getElementById(divArr[index]);
            plotly.newPlot(gd,data);

                })();
            }
}

它几乎可以工作。每个图表似乎都绘制了给它的第一组数据，但没有后续文字。也许我一直盯着这个太长时间，但我只是看不出我在这里做错了什么，但我确信这是我刚才看到的东西。或者也许我太过分了，我不能做这种事情？任何见解都表示赞赏！

Answer 1

所以我发现问题在于从我的列表到js数组的序列化。显然js序列化不能完全处理我疯狂的多维列表级别。所以我通过使列表更低一级来修复它，并制作另一个列表来跟踪它们以这种方式“深度”：

C＃Codebehind：

public List<List<string>> names = new List<List<string>>();
public List<int> numObjs = new List<int>();
public List<List<string>> labels = new List<List<string>>();
public List<List<double>> longitude = new List<List<double>>();

JS序列化：

var divArr = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(divs)%>;
var names = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(names)%>;
var numO = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(numObjs)%>;
var lbl = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(labels)%>;
var long = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(longitude)%>;

然后JS函数以这种方式通过循环进行真正的更改：

function doGraph(){
        var cur = 0;
        for(var index = 0; index < divArr.length; ++index){
                var data = [];
                var top = cur + numO[index];
                for(var indx = cur; indx < top; ++indx){
                    data.push({
                        name: names[indx],
                        mode:'lines',
                        x: lbl[indx],
                        y: long[indx],
                    });
                    cur++;
                }

                var gd = document.getElementById(divArr[index]);
                Plotly.newPlot(gd, data, 
                                layout , {scrollZoom:true,modeBarButtonsToRemove:['sendDataToCloud'],showLink:false,displaylogo:false});
        }
}

同样，我在函数中的函数绝对没必要，因为@flipperweid说。

嵌套for循环

1 个答案: