#c# #jquery #google-visualization #google-datatable
#c# #jquery #google-визуализация #google-datatable
Вопрос:
Я использую Google.Оболочка для обработки данных от @zoranmax. Я могу заставить однострочную диаграмму работать нормально. Что я хочу сделать, так это отобразить несколько строк.
Когда я возвращаю вызов JSON в AJAX для создания диаграммы, мне говорят, что у меня нет столбцов в таблице.
Возвращаемый код C # выдает список строк, которые индексируются, поэтому для каждой серии существует 0,1,2 и т.д.
Вот пример вывода JSON JSON Output, существует 20 таких массивов, которые возвращаются из кода C # за одно нажатие на вызов AJAX.
Как вы можете видеть, JSON проверяется, но он просто не будет работать.
Вызов AJAX:
$.ajax({
url: 'ProjectCharts/GetMultiChartData',
datatype: 'json',
type: 'get',
async: false,
data: { section: section, uid: uid, from: from, to: to },
contentType: 'application/json; charset=utf-8',
success: function (d) {
parsedData = $.parseJSON(d);
console.log(parsedData);
var data = new google.visualization.DataTable(parsedData);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
var options = multiLineChartOptions();
chart.draw(data, options);
},
error: function () {
alert("Error");
}
});
Часть C #:
public string CreateJsonMultiChartDataTable(string serial, string guid, string datefrom, string dateto)
{
var serials = _context.LogTagRawData.Where(x => x.ProjectGuid == guid).Select(x => x.SerialNumber).Distinct().ToList();
var projectUid = guid;
var from = datefrom;
var to = dateto;
List<string> multiDt = new List<string>();
try
{
foreach (var s in serials)
{
var data = GetChartDataFromSqlServer(s, projectUid, from, to);
var dt = new Google.DataTable.Net.Wrapper.DataTable();
dt.AddColumn(new Google.DataTable.Net.Wrapper.Column(Google.DataTable.Net.Wrapper.ColumnType.Datetime, "Date", "Date"));
dt.AddColumn(new Google.DataTable.Net.Wrapper.Column(Google.DataTable.Net.Wrapper.ColumnType.Number, "Data", "Data"));
foreach (var item in data)
{
Google.DataTable.Net.Wrapper.Row r = dt.NewRow();
r.AddCellRange(new Google.DataTable.Net.Wrapper.Cell[]
{
new Google.DataTable.Net.Wrapper.Cell(Convert.ToDateTime(item.ReadingDate)),
new Google.DataTable.Net.Wrapper.Cell(item.ReadingValue)
});
dt.AddRow(r);
}
multiDt.Add(dt.GetJson());
}
}
catch (Exception ex)
{
var m = ex.Message;
}
var sb = new StringBuilder();
sb.Append("[");
foreach(var i in multiDt)
{
sb.Append("[");
sb.Append(i);
sb.Append("],");
}
sb.Append("]");
string xx = sb.ToString();
int yy = xx.LastIndexOf(',');
xx = xx.Remove(yy, 1);
return xx;
}
Вызов JSON из AJAX
public JsonResult GetMultiChartData(string serial, string uid, string from, string to)
{
var dateFrom = Convert.ToDateTime(from).ToString("yyyy-MM-dd HH:mm:ss");
var dateTo = Convert.ToDateTime(to).AddMinutes(1).ToString("yyyy-MM-dd HH:mm:ss");
var g = new GetChartData(_context, _configuration);
var items = g.CreateJsonMultiChartDataTable(serial, uid, dateFrom, dateTo);
var deserialisedJsonData = JsonConvert.DeserializeObject(items);
return Json(JsonConvert.SerializeObject(deserialisedJsonData, Formatting.Indented));
}
Комментарии:
1. Я думаю, что данных слишком много. Я обновлю это позже меньшим набором.
2. Я добавил два массива в jsoneditoronline.org/?id=a9f1de8b128d4b7abc18aee37709786b
3. Я десериализовал и повторно сериализовал данные, чтобы получить массив массивов.
4. Я протестировал вывод для однострочной диаграммы, и он отлично работает. Я просто пытаюсь добавить несколько наборов данных.
5. таблица данных Google может принимать только один набор данных json, чтобы рисовать несколько линий, добавлять дополнительные столбцы — первый столбец для оси x, каждый дополнительный столбец для оси y — используйте
null
для столбцов по оси y, которые не совпадают с определенным значением по оси x — другим вариантом было бы создать несколько таблиц данных, затем объединить их с помощью метода join() , но, очевидно, это повлияло бы на производительность…