将 JSON 解析为 Google 图表

Question

我正在寻找一种将我的 json 解析为简单 js 折线图的方法。我尝试了 ChartJS 但没有成功，然后我尝试了 Google Charts。

问题是我有一个很长的 JSON 文件要解析，但无法找到过滤它并解析到 Google Chart 的方法。

我想过滤 JSON 并仅获取一个节点的值和日期（例如：在下面的 JSON 中获取 ABEV3 的值）。

JSON：

{
    "RAIL3": {
        "2021-02-12": "20.18",
        "2021-02-11": "19.81",
        "2021-02-10": "20.13",
        "2021-02-09": "20.85",
        "2021-02-08": "21.35",
        "2021-02-05": "21.35",
        "2021-02-04": "21.50",
        "2021-02-03": "21.70",
        "2021-02-02": "20.77",
        "2021-02-01": "21.10",
        "2021-01-29": "20.30",
        "2021-01-28": "20.92",
        "2021-01-27": "20.74",
        "2021-01-26": "20.67",
        "2021-01-22": "20.85",
        "2021-01-21": "20.89",
        "2021-01-20": "21.03",
        "2021-01-19": "21.10",
        "2021-01-18": "20.92",
        "2021-01-15": "21.21",
        "2021-01-14": "20.74"
    },
    "ABEV3": {
        "2021-02-12": "14.79",
        "2021-02-11": "14.95",
        "2021-02-10": "15.01",
        "2021-02-09": "14.96",
        "2021-02-08": "14.94",
        "2021-02-05": "15.52",
        "2021-02-04": "15.60",
        "2021-02-03": "15.68",
        "2021-02-02": "15.61",
        "2021-02-01": "15.60",
        "2021-01-29": "15.11",
        "2021-01-28": "15.54",
        "2021-01-27": "15.39",
        "2021-01-26": "15.40",
        "2021-01-22": "15.15",
        "2021-01-21": "15.61",
        "2021-01-20": "16.02",
        "2021-01-19": "16.27",
        "2021-01-18": "16.22",
        "2021-01-15": "15.95",
        "2021-01-14": "16.26"
    },
    "BBAS3": {
        "2021-02-12": "33.75",
        "2021-02-11": "33.94",
        "2021-02-10": "33.81",
        "2021-02-09": "34.28",
        "2021-02-08": "33.87",
        "2021-02-05": "33.96",
        "2021-02-04": "34.19",
        "2021-02-03": "34.33",
        "2021-02-02": "34.06",
        "2021-02-01": "34.29",
        "2021-01-29": "33.86",
        "2021-01-28": "34.54",
        "2021-01-27": "33.59",
        "2021-01-26": "32.79",
        "2021-01-22": "33.69",
        "2021-01-21": "34.18",
        "2021-01-20": "34.53",
        "2021-01-19": "35.32",
        "2021-01-18": "35.93",
        "2021-01-15": "36.30",
        "2021-01-14": "37.46"
    }
}

代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "jsonfile.json",
          dataType: "json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.Line(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 400});
    }

    </script>

<div id="chart_div" style="width: 100%; height: 100%"></div>

Answer 1

修改点：

• 在您的脚本中，可以使用responseJSON 代替responseText。
• 如果要使用ABEV3 的值，可以使用jsonData.ABEV3 检索ABEV3 的值。
• 而且，我认为需要将每个值的类型从字符串修改为数字。
• 请将google.visualization.Line修改为google.visualization.LineChart。

当以上几点反映到你的脚本中时，它变成如下。

修改脚本：

请修改drawChart()如下。

function drawChart() {
  var jsonData = $.ajax({
    url: "jsonfile.json",
    dataType: "json",
    async: false
  }).responseJSON;
  
  var key = "ABEV3";  // Please set the key you want to use.
  var ar = Object.entries(jsonData[key]).map(([a, b]) => [a, Number(b)]);
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'value');
  data.addRows(ar);
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 400});
}

注意：

• 在此修改中，它假设您的url: "jsonfile.json", 可以返回您问题中的 JSON 数据。请注意这一点。
• 此修改后的脚本是使用您的脚本进行的简单修改。所以，请根据您的实际情况进行修改。

参考：

• Line Chart