时间戳

首页 > 解决方案 > 如何使用 Javascript 使用 64382 行 JSON 数据创建图表（如 Excel）。（没有 Chart.js 或其他类似的东西，只有 js、html 或 css）

javascript - 如何使用 Javascript 使用 64382 行 JSON 数据创建图表（如 Excel）。（没有 Chart.js 或其他类似的东西，只有 js、html 或 css）

问题描述

我有一个项目在几个小时后到期，需要使用 64382 行 JSON 数据制作图表。我对javascript不太了解，所以我没有任何想法。我之前用javascript做了一个图表，但它只用了3行数据。该图表不像条形图或饼图，而是像您在 excel 中制作的东西。在代码部分，我将放置我使用 3 行数据制作的图表。我使用的数据可以在这里找到：https://drive.google.com/uc?export=view&id=1VtT_y34UCJ9lHHfSqrhaeDeU92CGyXb7

我没有做太多，我找不到任何资源来告诉我如何使用 for 循环提取这个 json 数据。我认为我应该这样做。就像 (i=0;i < data.length; i=i+1) {. 但我不知道现在如何将其放入我的图表中。我还必须检查是否没有 5 个阿富汗或加拿大或其他什么的，所以我也需要代码来做到这一点。

<div id="printmytable"></div>

<script>

function buildmyTable() {

  var inventors = [{name:"Tim Berners-Lee",invention:"6xU & HTML"},{name:"Haken Wium Lie",invention:"CSS"},{name:"Brendan Eich",invention:"Javascript"}];

  // build a string variable with all the table code and data
  var mytable = "<table border='1'>";
  mytable = mytable + "<th>Inventor</th><th>Invention</th>";

  // loop through data table to add data
  for (i = 0; i < inventors.length; i = i + 1) {
    mytable = mytable + "<tr>";
    mytable = mytable + "<td>" + inventors[i].name + "</td><td>" + inventors[i].invention + "</td>";
    mytable = mytable + "</tr>";
  }

  mytable = mytable + "</table>";

  // get the div and substitute mytable data for it
  var placetoprint = document.getElementById("printmytable");
  placetoprint.innerHTML = mytable;

}

buildmyTable()

</script>

我想要一个看起来像用 excel 制作的图表，每个国家只显示一次。我真的不知道

标签： javascripthtmlcss

解决方案

我修改了您要显示的一些实际数据，以仅包含几个条目来包含多个国家/地区。通过这种方式，您可以了解如何使用数组存储已显示的国家/地区来防止重复国家/地区，以及如何访问数据数组中对象的各个节点。

在创建新表行之前特别查看 if 语句。肯定有其他方法可以做到这一点，但基本上你只是想要一种方法来跟踪你已经显示的国家。

var data = [
    {
        "dims": {
            "COUNTRY": "Afghanistan",
            "YEAR": "2016",
            "GHO": "Number of physicians"
        },
        "Comments": "Includes doctors</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "9842"
    },
    {
        "dims": {
            "COUNTRY": "Afghanistan",
            "YEAR": "2016",
            "GHO": "Number of dentistry personnel"
        },
        "Comments": "Includes Dentists</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "120"
    },
    {
        "dims": {
            "COUNTRY": "Canada",
            "YEAR": "2016",
            "GHO": "Number of pharmaceutical personnel"
        },
        "Comments": "Includes Pharmacists</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "1675"
    },
    {
        "dims": {
            "COUNTRY": "Mongolia",
            "YEAR": "2015",
            "GHO": "Number of physicians"
        },
        "Comments": "Includes doctors</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "9808"
     }
]
              


function buildmyTable() {

  // build a string variable with all the table code and data
  var mytable = "<table border='1'>";
  mytable = mytable + "<th>Country</th><th>Value</th>";

  // loop through data table to add data
  var countries = []
  for (i = 0; i < data.length; i = i + 1) {
    if (!countries.includes(data[i].dims.COUNTRY)){
      mytable = mytable + "<tr>";
      mytable = mytable + "<td>" + data[i].dims.COUNTRY + "</td><td>" + data[i].Value + "</td>";
      mytable = mytable + "</tr>";
      countries.push(data[i].dims.COUNTRY);
    }
  }

  mytable = mytable + "</table>";

  // get the div and substitute mytable data for it
  var placetoprint = document.getElementById("printmytable");
  placetoprint.innerHTML = mytable;

}

buildmyTable()
<div id="printmytable"></div>

希望这可以帮助。祝你好运！

推荐阅读