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

这样的事情可能吗？此数据采用该格式，因为这是 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 到底在哪里。另外你不需要 jQuery 来从这个对象创建一个表。这个 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/

文档：

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