Question

编辑：我有一个HTML表，如下图所示，现在我需要使用上次使用的相同代码制作图表（记住，我们必须编写一个jquery代码来选择数据）。

我这次需要的图表是时间轴图表。（在第4列和第9列中选择了时间），并且对于每种类型（粉红色/蓝色/绿色..），绘制了折线图，其总金额按时间大写。

示例：对于绿色Catégorie，该产品的生产线代表

2012年12月12日：8000美元
2012年12月13日：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

我为您创建了两个功能。一种是按日期对数据进行分组，第二种是为图表准备数据。这有点复杂，但这不是正确的方法。您应该在服务器端进行数据操作。

我使用td的数据值来轻松获取值。您认为<span>元素中会使用td之类的不同元素，因此从数据值attr获取数据是更好的选择。

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();
});

jQuery获取数组中的HTML Table列的文本

1 个答案: