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

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

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

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

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

load（“当前”{packages:[“corechart”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“执行状态”，“测试数”]，
[“不确定”，3]，
['Failed'，1]，
[‘其他’，2]，
[‘通过’，1]，
]);
变量选项={
标题：“执行结果”，
is3D：是的，
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart_3d'）；
图表绘制（数据、选项）；
}

您可以使用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);
  });
});

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

请确保在页面中包含jquery

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

---

当我试图访问位于本地计算机上的json文件时，收到此错误消息-访问位于'file:///C:/TestExecutionResult.jsonCORS策略已阻止“来自源”的“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、chrome不受信任、，https.是否需要从http服务器访问json文件？因为这个json文件将从我本地硬盘上的可执行文件动态填充，该文件将作为google Chart的输入。我今天已经用多种方法尝试了您的解决方案，上面的错误不再出现，但html总是显示一个空白，只有我在正文中添加的表头。下面是我正在使用的外部json的内容-{“TestCasesPassed”：0，“TestCasesFailed”：1，“TestCasesOther”：0，“TestCasesInConcertive”：0}。该解决方案与您给我的相同，但它呈现一个空白html。我尝试了其他方法进行AJAX调用，但对我来说不起作用：-（json必须可以从web服务器上获得。我将它放在apache htdocs下。我可以通过web浏览器访问json，但它仍然呈现一个空白html。控制台上没有列出错误。下面是我正在尝试的-$.AJAX（{url:，数据类型：“json”）。完成（函数）（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）]；}）；