Jquery получить текст столбца HTML таблицы в массиве

Question

Редактировать: у меня есть таблица HTML, как на картинке ниже, и теперь мне нужно сделать диаграмму с тем же кодом, который мы использовали в прошлый раз (помните, что мы должны написать код jquery для выбора данных).

График, который мне нужен на этот раз, является графиком временной шкалы.(со временем, выбранным в столбце 4 и столбце 9) и для каждого типа (розовый / синий / зеленый ..) линейный график с суммой суммы, заглавной по времени.

Пример: для зеленой категории «Категори» указывается линия

• В 12.12.2012: 8000 $
• В 13.12.2012: 8000 $ +1000 $

Код:

  <script>             
 function getData(columnOrder, keyName) {
 var obj, table = $('table'), array = [];
 table.find('tbody tr').each(function() {
 var rows = $(this).find('td:nth-child(' + columnOrder +')');
 rows.each(function(){
    obj = {};
    obj[keyName] = $(this).text();
    array.push(obj);
 });
 });
 return array;
 }

 var Time= getData(4, 'time');
 var datasline1 = getData(5, 'value');
 var datasline2 = getData(5, 'value');
 var datasline3 = getData(5, 'value');
 var datasline4 = getData(5, 'value');


 console.log(Time);
 console.log(datas1/2/3/4);


 $("#chart-container").insertFusionCharts({
 type: "mscombi2d",
 width: "100%",
 height: "40%",
 dataFormat: "json",
 dataSource: {
 "chart": {
 "caption": "Balance Perfomance",

 "exportenabled": "1",
 "theme": "fusion"
 },
 "Time": [
 {
  "Time": Time
  }
 ],
 "dataset": [
 {
  "seriesname": "Line1",
     "renderas": "line",
  "showanchors": "1",
  "data": datasline1
  },
  {
  "seriesname": "Line2",
     "renderas": "line",
  "showanchors": "1",
  "data": datasline2
  },
  ] 
  }
  });

        </script>

Редактировать 2: Ошибки моей консоли

Answer 1

Я создал две функции для вас.Один - это группировка данных по дате, а второй - подготовка данных для диаграммы.Это немного сложно, но это не совсем так.Вы должны сделать манипулирование данными на стороне сервера.

И я использовал data-value для td, чтобы легко получить значения.Вы используете различные элементы, такие как <span> в элементе td, поэтому я считаю, что получить данные из атрибута data-value лучше.

jsfiddle

function groupDataByDate() {
   var columns, columnOrder, data,
       table = $('table'), mainObj = {};

   columns = [
    {
      title: 'date',
      values: [4,9]
    },
    {
      title: 'element',
      values: [1,6]
    },
    {
      title: 'value',
      values: [5,10]
    }
  ];

   table.find('tbody tr').each(function() {
     data = {};
     for(i = 0; i < columns.length; i++) {
       text = $(this).find('td:nth-child(' + columns[i].values[0] +')').data('value');
       if (!text) {
         text = $(this).find('td:nth-child(' + columns[i].values[1] +')').data('value');
       }

       data[columns[i].title] = text;
     }

     if (!mainObj[data.date]) {
       mainObj[data.date] = [];
     }
       mainObj[data.date].push(data);
   });

  // convert to array from object
   return $.map(mainObj, function(value, index) {
       return [value];
   });
}

function getData(data, type) {
  var arr = [], mainObj = {};
  if (type === 'dates') {

    for(i = 0; i < data.length; i++) {
      arr.push({ label: data[i][0].date })
    }

    return arr;
  }

  var subObj = {
      invoice: { value: 0 },
      pettycash: { value: 0 },
      tocash: { value: 0 },
      bankentry: { value: 0 },
  };

  for(index = 0; index < data.length; index++) {

    // sum with previous dates
    for(i = 0; i < data[index].length; i++) {
      subObj[data[index][i].element].value += Number(data[index][i].value);
    }

    arr.push(Object.assign({},{
      invoice: Object.assign({}, subObj.invoice),
      pettycash: Object.assign({}, subObj.pettycash),
      tocash: Object.assign({}, subObj.tocash),
      bankentry: Object.assign({}, subObj.bankentry)
    }));
  }

  return arr;
}

var groupedData = groupDataByDate();
var categoryDatas = getData(groupedData, 'dates');
var valueDatas = getData(groupedData, 'values');

const dataSource = {
  "chart": {
    "caption": "Reach of Social Media Platforms amoung youth",
    "yaxisname": "% of youth on this platform",
    "subcaption": "2012-2016",
    "showhovereffect": "1",
    "numbersuffix": "$",
    "drawcrossline": "1",
    "plottooltext": "<b>$dataValue</b> of youth were on $seriesName",
    "theme": "fusion"
  },
  "categories": [
    {
      "category": categoryDatas
    }
  ],
  "dataset": [
    {
      "seriesname": "Invoice",
      "data": valueDatas.map(function(item){
        return item.invoice
      })
    },
    {
      "seriesname": "PettyCash",
      "data": valueDatas.map(function(item){
        return item.pettycash
      })
    },
    {
      "seriesname": "To Cash",
      "data": valueDatas.map(function(item){
        return item.tocash
      })
    },
    {
      "seriesname": "BankEntry",
      "data": valueDatas.map(function(item){
        return item.bankentry
      })
    }
  ]
};

FusionCharts.ready(function() {
   var myChart = new FusionCharts({
      type: "msline",
      renderAt: "chart-container",
      width: "100%",
      height: "100%",
      dataFormat: "json",
      dataSource
   }).render();
});