Javascript 以表格格式显示timeseries json数据

我有以下json数据，我希望以HTML表的格式显示这些数据

数据：

我的想法是将其显示为表格：

Time|Cpu 1 | cpu 2| cpu 3|
t1    v1     v2      v3

到目前为止，我的代码在中，除了我的cpu2和CPU3没有填充之外，我成功地获取了表格式：

   Time|cpu1|cpu2|cpu3
    t1   v1
    t2   v2
    t1   v3
    t2   v4
    t1   v5
    t2   v6

我的代码是可用的

---

欢迎提供任何帮助，目前我正在使用html表，是否有其他方法使用jquery表插件简化任务？

请检查更新fiddle@

if（数据）{
var len=data.length；
var行=新数组；
//警报（len）；
var txt=“”；
如果（len>0）{
var tab2=document.getElementById（“表”）；
var table=document.getElementById（“coltab”）；
对于（var i=0；i写入：

if（数据）{
var len=data.length；
var txt=“”，
th=“”；
如果（len>0）{
var alen=data[0]。datapoints.length；
对于（var j=0；j

解决方案不是通用的，因为您假设我们只有3个目标，如果我错了，请纠正我。这如何扩大规模？var cell3=row[j]。insertCell（-1）；//假设我们了解数据元素。cell3.innerHTML=data[i]。datapoints[j][0]；没有通用的解决方案。var cell3=row[j]。insertCell（-1）；将在行的末尾添加新的单元格。即进一步的CPU@右侧。您可以检查较少或较多的数字目标amd给我举个例子。如果不起作用。我将检查它是否干净，谢谢。我们没有使用html生成数据的插件吗？我们如何使用此方法更改颜色？假设我们希望与阈值进行比较（说80），80以上，绿色，80以下是红色，但我想问一下，你为什么要生成html？这比插入单元格或cell.backgroundcolor等有优点吗？另外，在jquery中，我们有没有直接制表数据而不是使用HTML@VamsiKrishna我对javascirpt不太满意，所以我这样写代码ave一个URL，它提供json数据。我们需要发送ajax请求吗？我正在使用Giraffe..生成URL函数
   Time|cpu1|cpu2|cpu3
    t1   v1
    t2   v2
    t1   v3
    t2   v4
    t1   v5
    t2   v6

           if(data){
            var len = data.length;
            var row = new Array;
          // alert (len);
            var txt = "";
            if(len > 0){
                var tab2 = document.getElementById("table");
                var table = document.getElementById("coltab");
                 for(var i=0;i<len;i++){
                    //alert (i);
                   // var row = tab2.insertRow(1);
                    var len_data = data[i].datapoints.length;

                    var cell1 = table.insertCell(i+1);
                    //var cell2 = row.insertCell(1);
                     cell1.innerHTML = data[i].target;
                     for (var j = 0; j <len_data;j++) {
                         if (i==0)
                         row[j] = tab2.insertRow(j+1);
                         if (i==0)
                         {
                         var cell2 = row[j].insertCell(0);
                         cell2.innerHTML = data[i].datapoints[j][1];
                         }
                         var cell3 = row[j].insertCell(-1); 
                         cell3.innerHTML = data[i].datapoints[j][0];  
                     }
                }
            }
        }

if (data) {
    var len = data.length;
    var txt = "",
        th = "";
    if (len > 0) {
        var alen = data[0].datapoints.length;
        for (var j = 0; j < alen; j++) {
            txt += "<tr>";//new row
            for (var i = 0; i < len; i++) {
                var dt = data[i].datapoints[j][0];
                var first = data[i].datapoints[j][1];
                if (i == j) {
                    th += "<th>" + data[i].target + "</th>";
                }
                if (i == 0) {
                    txt += "<td>" + first + "</td>"; //first cell in each row
                }
                txt += "<td>" + dt + "</td>";
            }
            txt += "</tr>";//end row
        }
    }
    $("#table").append(txt); //table data
    $("#coltab").append(th); //header row
}