Итерация над IEnumerable в Javascript для Chartjs

Question

Я столкнулся с проблемой, когда у меня есть IEnumerable<string> меток и IEnumerable<double[]> данных в объекте модели MVC, и я хотел бы построить эти значения с помощью Chartjs.

Я передаю оба из них в функцию javascript, которую я пытаюсь сделать диаграммой.

Chartjs синтаксис таков, что я хочу, в сущности:

var data = { 
       ... chart info e.g. colors, etc. 
       datasets: [ 
        { 
         label: labels[0], // My first label 
         data: datas[0] // My first double[] 
        }, 
        // Repeat for each data/label combo 
        { 
         label: labels[n], // My n-th label 
         data: datas[n] // My n-th double[] 
        } 
       ] 
      }; 

Учитывая мои две коллекции, как я могу извлечь информацию в них надлежащим образом? Очевидно, что длины этих коллекций должны быть одинаковыми, так как существует взаимно-однозначная ассоциация. Я попробовал расчесывать их в Tuple, но я думаю, что это сделает его более сложным на стороне js.

Или кто-нибудь знает более простой способ достичь того же конечного результата с помощью ChartJS?

Мне комфортно с C#, но Javascript для меня новичок.

Answer 1

Конечно, вы можете отправить кортеж на клиентскую сторону и легко разбить его на Java-скрипт. Вы можете сделать простой вызов ajax, чтобы получить свой кортеж как объект Json, а затем разделить его на два массива. Затем эти массивы можно использовать в ярлыках chart.js и точках данных.

$.ajax({ 
    url: 'AjaxCall/getChartObjects', 
    dataType: 'json', 
    data: {}, 
    success: function (data) { //data here being the tuple recieved from server 
     //receive the tuple as a single Json object and split it up easily with some seperate arrays 
     dblArray= [] 
     $.each(data.Item1, function (index, value) { 
      dblArray.push(value.text); //label array 
     } 
     descArray= [] 
     $.each(data.Item2, function (index, value) { 
      descArray.push(value.dblTxt); //data array 
     } 
    }, 
    error: function (xhr, status, error) { 
     console.log('Error: ' + error.message); 
    } 
}); 

Отправка кортеж из контроллера будет что-то вроде:

//tuple sends two objects together- both job arrays will be seperated 
//and used in observables on client side 
var chartObjects = Tuple.Create(chartData, chartLabel); 

return Json(chartObjects, JsonRequestBehavior.AllowGet); 

Вы бы тогда массивы, которые нужно поместить в свойствах графика:

var barChartData = { 
       labels: descArray, //array labels 
       datasets: [ 
        { 
         type: "Bar", 
         strokeColor: "black", 
         pointColor: "rgba(220,220,220,1)", 
         pointstrokeColor: "white", 
         data: dblArray, 

        } 
       ] 
      } 

Я думаю, Я не совсем уверен, что это то, что вы искали. Дайте мне знать, если у вас есть вопросы.