我有调用 google 表格数据的 JScript 代码，但是虽然此代码可以访问 JSFiddle 上的数据，但它不能通过本地客户端访问数据。检查之前的答案，我检查我是否将我的 js 代码包装在 DOM 处理程序中，并且我认为我适本地加载了库。事实上元素加载，只是出于某种原因没有数据。
这是 jsfiddle .
这是我的 HTML 正文
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/custom.js"></script>
<meta charset="utf-8"/>
<title>Waste Water Management Design Exercise</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div id="masterDiv">
<h2>Design Objectives</h2>
<div id="tabs">
<ul>
<li>
<a href="#tab-1">Line Graph</a>
</li>
<li>
<a href="#tab-2">Bar Graph</a>
</li>
<li>
<a href="#tab-3">Objective View</a>
</li>
</ul>
<div id="tab-1">
<div id="objective_line">
</div>
</div>
<div id="tab-2">
<div id="objective_bar"></div>
</div>
<div id="tab-3">
<div id="obj_view"></div>
</div>
</div>
<br>
<br>
<div class="selector">
<div id="exiting" class="category on">
<h3>Design Cost Breakdown</h3>
</div>
<div id="entering" class="category off">
<h3>Parameter Variations</h3>
</div>
</div>
<div id="containerBar" style="min-width: 310px; height: 450px; margin: 0 auto"></div>
<div id="table_div" style="min-width: 310px; height: 450px; margin: 0 auto">
</div>
</div>
</body>
</html>
这是我的 JScript 代码
$(document).ready(function() {
$("#table_div").hide();
$("#entering").click(function(){
$("#containerBar").hide();
$("#table_div").show();
$(this).removeClass("off").addClass("on");
$("#exiting").removeClass("on").addClass("off");
});
$("#exiting").click(function(){
$("#table_div").hide();
$("#containerBar").show();
$(this).removeClass("off").addClass("on");
$("#entering").removeClass("on").addClass("off");
});
$(function() {
$( "#tabs" ).tabs();
} );
$(function () {
Highcharts.chart('obj_view', {
chart: {
type: 'column'
},
title: {
text: 'Objective Breakdown'
},
xAxis: {
tickmarkPlacement: 'on',
title: {
text: 'Design Iterations'
}
},
yAxis:{
min: 0,
title: {
text: 'Cost in $ Millions',
align: 'low'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions',
shared: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 20,
floating: true
},
data: {
googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
switchRowsAndColumns: true
}
})
});
$(function () {
Highcharts.chart('objective_line', {
chart: {
type: 'line'
},
title: {
text: 'Overall Design Objective Comparisons'
},
xAxis: {
tickmarkPlacement: 'on',
title: {
text: 'Design Objectives'
}
},
yAxis:{
min: 0,
title: {
text: 'Cost in $ Millions',
align: 'low'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions',
shared: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 20,
floating: true
},
data: {
googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}
})
});
$(function () {
Highcharts.chart('objective_bar', {
chart: {
type: 'bar'
},
title: {
text: 'Overall Design Objective Comparisons'
},
xAxis: {
tickmarkPlacement: 'on',
title: {
text: 'Design Objectives'
}
},
yAxis:{
min: 0,
title: {
text: 'Cost in $ Millions',
align: 'low'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions',
shared: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 20,
floating: true
},
data: {
googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}
})
});
$(function () {
Highcharts.chart('containerBar', {
chart: {
type: 'column'
},
title: {
text: 'Design Cost Breakdown'
},
yAxis: {
min: 0,
title: {
text: '$ 1M'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: 0,
verticalAlign: 'middle',
y: 30,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
width: 180
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
data:{
googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
googleSpreadsheetWorksheet: 2
}
});
});
$(function () {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Parameter');
data.addColumn('string', 'Design 1');
data.addColumn('string', 'Design 2');
data.addColumn('string', 'Design 3');
data.addRows([
['Waste Water Piping', 'No', 'Yes', 'Yes'],
['Waste Water Storage', 'Yes', 'No', 'Yes'],
['Waste Water Reuse', 'Yes', 'Yes', 'No'],
['Pipe Size', 'N/A', 'Medium', 'Small'],
['Storage Container Size', 'Medium', 'N/A', 'Small'],
['Waste Water Reuse Proportion', '30%', '40%', 'N/A']
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: false, width: '80%', height: '100%'});
}
});
});
最佳答案
这是由于浏览器中的安全“功能”:
https://www.thegeekstuff.com/2016/09/disable-same-origin-policy/
Disable same origin policy in Chrome
您可以禁用安全功能，或使用本地网络服务器。这个非常容易使用: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
关于javascript - 从谷歌表格获取数据适用于 jsfiddle 但不适用于本地客户端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49288562/