我有一个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>
以及我在localhost-上发布的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>
您可以使用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);
});
});