时间戳

首页 > 解决方案 > 从外部 json 数据创建 3D 谷歌图表到 html 文件

javascript - 从外部 json 数据创建 3D 谷歌图表到 html 文件

问题描述

我有一个包含以下内容的 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>

标签： javascripthtmljsonchartsgoogle-visualization

解决方案

可以使用jquery ajax获取json数据，
建google数据表，
绘制图表。

请参阅以下片段...

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);
  });
});

推荐阅读