Question

我是Javascript的初学者，所以这看起来像是一个基本问题。

我使用javascript从JSON文件创建了一个HTML表。该表名为＆＃34; JsonTable＆＃34;，有7列。我需要创建一个散点图，绘制第4列和第6列。如何选择这些列？我无法找到任何可以让我对列进行索引以选择它们的内容。

谢谢！

这是我的代码：当我运行它时，会出现一个包含7列的表。我需要绘制第4列和第6列。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

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


</head>
<body>



<div style="margin: 20px auto; width: 500px;">
<table  border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;">
    </table>
</div>

<script type="text/javascript">

function addAllColumnHeaders(myList) {
    var columnSet = [];
   var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#jsonTable").append(headerTr$);



    return columnSet;
}



$.getJSON("data.json", function (data) {

    var columns = addAllColumnHeaders(data);

    for (var i = 0; i < data.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {

            var cellValue = data[i][columns[colIndex]];

            if (cellValue == null) { cellValue = ""; }
            row$.append($('<td/>').html(cellValue));
        }
        $("#jsonTable").append(row$);
    }
});

</script>



</body>
</html>

Answer 1

这个问题有点宽泛。要稍微分解一下，首先你应该问“我如何以表示散点图的格式获取数据”，然后“我如何绘制散点图。”

由于您收到的JSON数据是一个数组数组，因此您希望将数组的每个项转换为新格式，即x / y对列表。数组的.map方法适用于此：

var points = data.map(function (item) {
  return { x: item[3], y: item[5] };
});

这会给你类似的东西：

[
  { x: 15, y: 69 },
  { x: 9, y: 295 }
]

如果您还想选择范围，可以在.slice之前使用.map：

var points = data
  .slice(startIdx, count)
  .map(function (item) {
    return { x: item[3], y: item[5] };
  });

如何从那里绘制散点图取决于您的要求是什么，但它基本上归结为使用一些绘制命令循环数据，将数据插入散点图库或其他类型的操作。

Javascript表中的行和列索引

1 个答案: