JavaScript Highcharts JSON данные в HTML таблице

Question

У меня есть JSon данные, которые следующим образом:

[{"Name":["CV","CT","ABM","AB","B","HD","P"],"Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4],"Baseline":143.41}] 

Я хочу, чтобы превратить это в HTML-таблицу, аналогично описанному ниже

Name  Data 
CV   944.79 
CT   540.93 
ABM  466.29 
AB   360.91 
B   109.93 
HD   64.9 
P   25.4 

ли что-то подобное возможное? Эти данные находятся в этом формате, потому что именно так будет читаться Barchart Highcharts.

Answer 1

Несомненно, вы можете.

var data = [ 
 
    { 
 
    "Name":["CV","CT","ABM","AB","B","HD","P"], 
 
    "Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4], 
 
    "Baseline":143.41 
 
    } 
 
]; 
 

 
data = data[0]; 
 

 
$(function() { 
 
    var table = $('<table class="info">'); 
 

 
    var tableHeader = $('<thead><tr><th>Name</th><th>Data</th></tr></thead>'); 
 
    var tableBody = $('<tbody>'); 
 
    var name, value, row; 
 
    
 
    table.append(tableHeader); 
 
    table.append(tableBody); 
 

 
    for (var i = 0, len = data.Name.length; i < len; i++) { 
 
    name = data.Name[i]; 
 
    value = data.Data[i]; 
 
    
 
    row = $('<tr><td>' + name + '</td><td>' + value + '</td></tr>'); 
 
    tableBody.append(row); 
 
    } 
 

 
    $('body').append(table); 
 
});

table.info { 
 
    border: 1px solid gray; 
 
} 
 

 
table.info thead { 
 
    background: silver; 
 
    } 
 

 
table.info tbody tr:nth-child(even) { 
 
    background: rgba(0, 0, 0, 0.3); 
 
    } 
 

 

 
table.info td { 
 
    text-align: center; 
 
    padding: 5px; 
 
    width: 100px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Не знаю, где именно highchart here.Also вам не нужно JQuery, чтобы создать таблицу из этого object.This Object имеет три ключа Name,Data,Baseline и если вы хотите, чтобы структурировать таблицу Вам просто нужно перебрать его и получить его значение

HTML

<table border="1"> 
<thead><tr><td>Name</td><td>Data</td></tr></thead> 
<tbody id="tabBody"></tbody> 
</table> 

JS

var a=[{"Name":["CV","CT","ABM","AB","B","HD","P"], 
"Data": [944.79,540.93,466.29,360.91,109.93,64.9,25.4], 
"Baseline":143.41}] 

var data = a[0]["Data"]; // get data array 
var name =a[0]["Name"];// get name Array 
var cachDom =""; 
for(var x=0;x<data.length;x++){ 
cachDom+="<tr><td>"+name[x]+"</td><td>"+data[x]+"</td></tr>"; 
} 
document.getElementById("tabBody").innerHTML=cachDom; 

WORKING EXAMPLE

Answer 3

Вы также можете использовать Highcharts API для создания таблицы, как в примере здесь:

Highcharts.drawTable = function() { 

    // user options 
    var tableTop = 310, 
     colWidth = 100, 
     tableLeft = 20, 
     rowHeight = 20, 
     cellPadding = 2.5, 
     valueDecimals = 1, 
     valueSuffix = ' °C'; 

    // internal variables 
    var chart = this, 
     series = chart.series, 
     renderer = chart.renderer, 
     cellLeft = tableLeft; 

    // draw category labels 
    $.each(chart.xAxis[0].categories, function(i, name) { 
     renderer.text(
      name, 
      cellLeft + cellPadding, 
      tableTop + (i + 2) * rowHeight - cellPadding 
     ) 
     .css({ 
      fontWeight: 'bold' 
     })  
     .add(); 
    }); 

    $.each(series, function(i, serie) { 
     cellLeft += colWidth; 

     // Apply the cell text 
     renderer.text(
       serie.name, 
       cellLeft - cellPadding + colWidth, 
       tableTop + rowHeight - cellPadding 
      ) 
      .attr({ 
       align: 'right' 
      }) 
      .css({ 
       fontWeight: 'bold' 
      }) 
      .add(); 

     $.each(serie.data, function(row, point) { 

      // Apply the cell text 
      renderer.text(
        Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix, 
        cellLeft + colWidth - cellPadding, 
        tableTop + (row + 2) * rowHeight - cellPadding 
       ) 
       .attr({ 
        align: 'right' 
       }) 
       .add(); 

      // horizontal lines 
      if (row == 0) { 
       Highcharts.tableLine(// top 
        renderer, 
        tableLeft, 
        tableTop + cellPadding, 
        cellLeft + colWidth, 
        tableTop + cellPadding 
       ); 
       Highcharts.tableLine(// bottom 
        renderer, 
        tableLeft, 
        tableTop + (serie.data.length + 1) * rowHeight + cellPadding, 
        cellLeft + colWidth, 
        tableTop + (serie.data.length + 1) * rowHeight + cellPadding 
       ); 
      } 
      // horizontal line 
      Highcharts.tableLine(
       renderer, 
       tableLeft, 
       tableTop + row * rowHeight + rowHeight + cellPadding, 
       cellLeft + colWidth, 
       tableTop + row * rowHeight + rowHeight + cellPadding 
      ); 

     }); 

     // vertical lines   
     if (i == 0) { // left table border 
      Highcharts.tableLine(
       renderer, 
       tableLeft, 
       tableTop + cellPadding, 
       tableLeft, 
       tableTop + (serie.data.length + 1) * rowHeight + cellPadding 
      ); 
     } 

     Highcharts.tableLine(
      renderer, 
      cellLeft, 
      tableTop + cellPadding, 
      cellLeft, 
      tableTop + (serie.data.length + 1) * rowHeight + cellPadding 
     ); 

     if (i == series.length - 1) { // right table border  

      Highcharts.tableLine(
       renderer, 
       cellLeft + colWidth, 
       tableTop + cellPadding, 
       cellLeft + colWidth, 
       tableTop + (serie.data.length + 1) * rowHeight + cellPadding 
      ); 
     } 

    }); 


}; 

/** 
* Draw a single line in the table 
*/ 
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) { 
    renderer.path(['M', x1, y1, 'L', x2, y2]) 
     .attr({ 
      'stroke': 'silver', 
      'stroke-width': 1 
     }) 
     .add(); 
} 

Диаграмма:

chart: { 
    renderTo: 'container', 
    events: { 
     load: Highcharts.drawTable 
    }, 
    borderWidth: 2 
}, 

Пример:

• http://jsfiddle.net/highcharts/z9zXM/

Docs:

• http://www.highcharts.com/docs/getting-started/frequently-asked-questions#add-data-table