javascript - C# 数组到 JavaScript 数组

Question

我的代码中有两个方法，一个返回 int 数组，另一个返回字符串数组。我想使用这两个数组来填充谷歌图表数据表。

我没有任何使用 Json 或 AJAX 的经验，但是我找到了一个相对简单的解决方案，使用 string.Join 和 eval 将字符串转换为数组。

我已经成功地使用 int 数组做到了这一点，但是我发现字符串数组有问题。我知道问题是我需要将 '' 添加到数组中的每个元素。

function drawChart() {

    var locality = ['Loc_A', 'Loc_B', 'Loc_C', 'Loc_D', 'Loc_E'];
    //var locality =  eval('[<% =string.Join(", ", locations)%>]');
    var frequency = eval('[<% =string.Join(", ", numbers ) %>]'); 

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'locality');
    data.addColumn('number', 'frequency');

    for (i = 0; i < locality.length; i++)
        data.addRow([locality[i], frequency[i]]);

    var options = {
         title: 'Test'
     };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

我需要通过在每个单词中添加 '' 来调整注释行，以便我可以将字符串转换为 JavaScript 数组。

关于如何将 c# 数组从代码行为转换为 java 脚本数组的任何想法或任何其他提示。代码示例将会非常有帮助。

Answer 1

方法一:在drawChart()中格式化图表数据

使用System.Web.Script.Serialization；

1) 构建 jsonobj

public string GetLocality()
    {
        string[] locality = new string[] { "Loc_A", "Loc_B", "Loc_C", "Loc_D", };
        //long[] frequency = new long[] { 10, 20, 10, 80 };
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string jsonobj = jsSerializer.Serialize(locality);
        return jsonobj;       
    }

2) 将其添加到 HTML 数据属性中或使用 ajax 调用拉取。

   <div id="piechart" data-piechart-localityary='<ServerSide call/var Getlocality()'> 
   <div>

3) 在 JavaScript 中从 html data-dash 中提取数据，如下所示

var locality = $('#piechart').data('piechart-localityary');

<小时/>

方法2:在代码隐藏中格式化图表数据

我建议保持 DrawChart() 函数简单。您提到您在后面的代码中可以使用数组。

1) 在代码隐藏中构建 JavaScript 字符串文字对象。 Format
2) 将 jSonData 作为数据属性附加到 html 页面中，或者使用 ajax 拉取它。如果不是很重要的话，我建议保存服务器往返。
3) 从 html-data-dash
获取这些数据到drawChart()中4) 工作示例JSFIDDLE附源码

function drawChart() {

//var jsonData = $('#piechart').data('piechar-jsonobj');
var jsonData =  
{
"cols":[
    {"label":"Locality","type":"string"},
    {"label":"Frequency","type":"number"}
       ],
"rows":[
    {"c":[{"v":"Loc_A","f":null},{"v":10.00,"f":null}]},
    {"c":[{"v":"Loc_B","f":null},{"v":20.00,"f":null}]},
    {"c":[{"v":"Loc_C","f":null},{"v":10.00,"f":null}]},
    {"c":[{"v":"Loc_D","f":null},{"v":80.00,"f":null}]}
       ]
} ;

var data = new google.visualization.DataTable(jsonData);


var options = {
    title: 'MyPieChart',
    backgroundColor: { fill: 'transparent' },
    is3D: true
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
} 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart);

构建 JavaScript 字符串文字对象的代码

 public class Graph
{
    public List<ColInfo> cols { get; set; }
    public List<DataPointSet> rows { get; set; }    
}

public class ColInfo
{

    public string label { get; set; }
    public string type { get; set; }
}

public class DataPointSet
{
    public List<DataPoint> c { get; set; }
}

public class DataPoint
{
    public string v { get; set; } // value    
    public string f { get; set; } // format
}

public string DemoPieChart()
    {
        Graph ChartData = new Graph();
        ChartData.cols = new List<ColInfo>();
        ChartData.rows = new List<DataPointSet>();
        ColInfo Col1 = new ColInfo();
        Col1.label = "Locality";
        Col1.type = "string";
        ColInfo Col2 = new ColInfo();
        Col2.label = "Frequency";
        Col2.type = "number";
        ChartData.cols.Add(Col1);
        ChartData.cols.Add(Col2);

        //Loop your data entry from both array
        string[] locality = new string[] { "Loc_A", "Loc_B", "Loc_C", "Loc_D", };
        long[] frequency = new long[] { 10, 20, 10, 80 };

        for (int i = 0; i < locality.Length; i++)
        {
            DataPointSet Row = new DataPointSet();
            Row.c = new List<DataPoint>();
            DataPoint p1 = new DataPoint();
            p1.v = locality[i];
            p1.f = null;

            DataPoint p2 = new DataPoint();
            p2.v =  frequency[i].ToString("F")  ;           
            p2.f = null;
            Row.c.Add(p1);
            Row.c.Add(p2);
            ChartData.rows.Add(Row);          
        }
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string jsonobj = jsSerializer.Serialize(ChartData);           
        return jsonobj;
      }

希望这可以帮助您构建解决方案。如果您需要澄清或特定代码，请添加注释。我使用 razor (MVC) 构建 html 来填充数据属性。

<小时/>

可能的问题:JavaScriptSerializer 在数字周围添加引号。

{"c":[{"v":"Loc_A","f":null},{"v": "10.00" ,"f":null}]}

注意“10.00”而不是 10.00。 GoogleCharts 不喜欢它。它可能无法绘制图表或绘制不正确的图表。