javascript将JSON数据图表化为HTML表_Javascript_Jquery_Json_Highcharts

javascript将JSON数据图表化为HTML表

javascript jquery json highcharts

javascript将JSON数据图表化为HTML表,javascript,jquery,json,highcharts,Javascript,Jquery,Json,Highcharts,我有如下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

我有如下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条形图就是这样读取的。

当然可以

var数据=[
{
“名称”：[“CV”、“CT”、“ABM”、“AB”、“B”、“HD”、“P”]，
“数据”：[944.79540.93466.29360.91109.93,64.9,25.4]，
“基线”：143.41
}
];
数据=数据[0]；
$（函数（）{
变量表=$（''）；
var tableHeader=$（'NameData'）；
var tableBody=$（''）；
变量名称、值、行；
table.append（tableHeader）；
table.append（表体）；
for（var i=0，len=data.Name.length；i
table.info{
边框：1px纯色灰色；
}
table.info thead{
背景：银；
}
table.info tbody tr:n子项（偶数）{
背景：rgba（0,0,0,0.3）；
}
table.info td{
文本对齐：居中；
填充物：5px；
宽度：100px；
}
当然可以

var数据=[
{
“名称”：[“CV”、“CT”、“ABM”、“AB”、“B”、“HD”、“P”]，
“数据”：[944.79540.93466.29360.91109.93,64.9,25.4]，
“基线”：143.41
}
];
数据=数据[0]；
$（函数（）{
变量表=$（''）；
var tableHeader=$（'NameData'）；
var tableBody=$（''）；
变量名称、值、行；
table.append（tableHeader）；
table.append（表体）；
for（var i=0，len=data.Name.length；i
table.info{
边框：1px纯色灰色；
}
table.info thead{
背景：银；
}
table.info tbody tr:n子项（偶数）{
背景：rgba（0,0,0,0.3）；
}
table.info td{
文本对齐：居中；
填充物：5px；
宽度：100px；
}
不确定highchart在这里的确切位置。您也不需要jQuery来创建此对象的表。此对象有三个键名称、数据、基线
如果你想构造一个表，你只需要循环遍历它并得到它的值
HTML

名称数据

JS
var a=[{“Name”：[“CV”、“CT”、“ABM”、“AB”、“B”、“HD”、“P”]，
“数据”：[944.79540.93466.29360.91109.93,64.9,25.4]，
“基线”：143.41}]
var data=a[0][“数据”]；//获取数据数组
var name=a[0][“name”]；//获取名称数组
var cachDom=“”；
for（var x=0；x不确定highchart在这里的确切位置。您也不需要jQuery来创建此对象的表。此对象有三个键名称、数据、基线
如果你想构造一个表，你只需要循环遍历它并得到它的值
HTML

名称数据

JS
var a=[{“Name”：[“CV”、“CT”、“ABM”、“AB”、“B”、“HD”、“P”]，
“数据”：[944.79540.93466.29360.91109.93,64.9,25.4]，
“基线”：143.41}]
var data=a[0][“data”]；//获取数据数组
var name=a[0][“name”]；//获取名称数组
var cachDom=“”；
对于（var x=0；x，您还可以使用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
},

例如：



文件：


您还可以使用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
},

例如：



文件：


这是一个赢家，我将如何添加格式？@Daniel，你可以将css添加到表格中。我将更新代码段以显示基本示例。这是一个赢家，我将如何添加格式？@Daniel，你可以将css添加到表格中。我将更新代码段以显示基本示例。这非常有趣，谢谢你。这只是dra吗w数据表独立于图表？数据表是否可以在不同的容器中呈现？在打印区域之外？这很有趣，谢谢。这只是单独绘制数据表，独立于图表？数据表是否可以在打印区域之外的不同容器中呈现？