从外部 json 数据到 html 文件创建 3D google 图表

Question

我有一个 json 文件，其中包含以下内容 -

{"Passed":"1","Failed":"1","Other":"2","Inconclusive":"3"}

我想创建一个 html 文件，它将呈现一个饼图，其中包含通过（绿色）、失败（红色）、不确定（粉色或蓝色）和其他（橙色）的图例。当鼠标悬停在饼图上时，它应该显示 json.

中给出的数字

这是我创建的 3D 饼图的 html 代码 -

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Execution State', 'Number of tests'],
          ['Inconclusive',     3],
          ['Failed',      1],
          ['Other',  2],
          ['Passed', 1],
        ]);

        var options = {
          title: 'Execution Result',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

现在我需要将外部 json 文件作为数据提供给我的 html 文件，而不是将内联数据传递给 html。我怎样才能做到这一点？任何解决我的问题的指标将不胜感激。谢谢！

编辑：这是我正在使用的最新代码 -

<html>
    <head>
        <title>Test Result</title>
        <link rel="icon" type="image/png" href="https://icons.iconarchive.com/icons/martz90/circle/256/plex-icon.png"/>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
        <script src="https://www.google.com/jsapi"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"/>
        <script type="text/javascript">
    google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  $.ajax({
    url: "http://localhost/TestExecutionResult.json",
    dataType: "json"
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Execution State');
    data.addColumn('number', 'Number of tests');

    $.each(jsonData, function (key, value) {
      data.addRow([key, parseInt(value)]);
    });

    var options = {
      title: 'Execution Result',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  });
});

        </script>
    </head>


    <body>
        <table>
            <tr>
                <th> Test result: </th>
            </tr>
            <tr>
                <td>
                    <div id="piechart_3d" style="width: 900px; height: 500px;"/>

                </td>
            </table>
        </body>

    </html>

和我在本地主机上发布的 json (TestExecutionResult.json) -

{"TestCasesPassed":0,"TestCasesFailed":1,"TestCasesOther":0,"TestCasesInconclusive":0}

编辑 2：

<html>
    <head>
        <title>Production Smoke Test Result</title>
        <link rel="icon" type="image/png" href="https://icons.iconarchive.com/icons/martz90/circle/256/plex-icon.png"/>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
        <script type="text/javascript">
    google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  $.ajax({
    url: "http://localhost/TestExecutionResult.json",
    dataType: "json"
  }).done(function (jsonData) {
    
    // send data to console
    console.log(JSON.stringify(jsonData));

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Execution State');
    data.addColumn('number', 'Number of tests');

    $.each(jsonData, function (key, value) {
      data.addRow([key, parseInt(value)]);
    });

    window.alert(jsonData);
    var options = {
      title: 'Execution Result',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }).fail(function (jqXHR, status, errorThrown) {
    // add fail callback
    console.log('error: ' + errorThrown);
  });
});
        </script>
    </head>


    <body>
        <table>
            <tr>
                <th> Test result: </th>
            </tr>
            <tr>
                <td>
                    <div id="piechart_3d" style="width: 900px; height: 500px;"/>

                </td>
            </table>
        </body>

    </html>

Answer 1

你可以使用jqueryajax来获取json数据，
构建 google 数据 table,
并绘制图表。

请参阅以下片段...

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  $.ajax({
    url: "path/data.json",
    dataType: "json"
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Execution State');
    data.addColumn('number', 'Number of tests');

    $.each(jsonData, function (key, value) {
      data.addRow([key, parseInt(value)]);
    });

    var options = {
      title: 'Execution Result',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  });
});

请确保在您的页面上包含 jquery...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

编辑

尝试将数据发送到控制台以确保它按预期接收。
并且，添加 fail 回调以查看 ajax 调用是否收到错误...

请参阅以下片段...

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  $.ajax({
    url: "path/data.json",
    dataType: "json"
  }).done(function (jsonData) {
    
    // send data to console
    console.log(JSON.stringify(jsonData));

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Execution State');
    data.addColumn('number', 'Number of tests');

    $.each(jsonData, function (key, value) {
      data.addRow([key, parseInt(value)]);
    });

    var options = {
      title: 'Execution Result',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }).fail(function (jqXHR, status, errorThrown) {
    // add fail callback
    console.log('error: ' + errorThrown);
  });
});

从外部 json 数据到 html 文件创建 3D google 图表

Creating 3D google chart from external json data to the html file

html

javascript

charts

json

google-visualization