C#数组到javascript数组
本文关键字:数组 javascript | 更新日期: 2023-09-27 18:29:37
我的代码后面有两个方法,一个返回int数组,另一个返回字符串数组。我想使用这两个数组来填充谷歌图表数据表。
我对Json或AJAX没有任何经验,但我发现了一个使用字符串的相对简单的解决方案。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脚本数组的任何想法或任何其他提示。代码示例将非常有用。
方法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) 从html数据中提取javascript中的数据作为
var locality = $('#piechart').data('piechart-localityary');
方法2:后代码中的图表数据格式
我建议保持DrawChart()函数的简单性。您提到您在代码背后有可用的数组。
1) 在代码隐藏中构建JavaScript字符串文字对象。格式
2) 要么将jSonData作为数据属性附加到html页面中,要么使用ajax将其拉入。如果不是关键的话,我建议节省一次服务器往返行程
3) 从html数据短划线将此数据获取到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不喜欢它。它可能不会绘制图表或绘制错误的图表。
这应该做到:
using System.Web.Script.Serialization;
public static string SerializeListAsJsonData<T>(List<T> list)
{
JavaScriptSerializer jsSerializer = new JavaScriptSerializer()
{
//MaxJsonLength = _maxJsonLength, <-- This is optional (used for large lists)
};
return jsSerializer.Serialize(list);
}
该方法获取一个对象列表,并为您序列化一个JSON字符串。您可以对该字符串执行JSON.parse(),然后可以在JavaScript中自由访问对象。您特别为C#数组请求了一些东西,但我建议您坚持使用列表(如果您需要一个字符串数组,那么只需制作一个字符串列表)。
List<string> list = new List<string>();
list.add("A");
list.add("B");
list.add("C");
list.add("D");
list.add("E");
string jsonString = SerializeListAsJsonData(list); // <-- jsonString is what you send to your JavaScript.
或者像这样,如果你需要保留你的字符串数组:
string[] stringArray = { "A", "B", "C", "D", "E" };
string jsonString = SerializeListAsJsonData(stringArray.ToList<string>()); // <-- jsonString is what you send to your JavaScript