Charts 仪表控制不显示任何内容
我试图显示一个谷歌图表仪表控件。我有一个非常简单的网页,如下所示:Charts 仪表控制不显示任何内容,charts,google-visualization,Charts,Google Visualization,我试图显示一个谷歌图表仪表控件。我有一个非常简单的网页,如下所示: <!--Load the Google Charts AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></di
<!--Load the Google Charts AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
@section Scripts {
<script src="~/Scripts/Brewery/fermenterVisualization.js"></script>
}
页面加载成功,JS代码执行无误。但是,我没有在页面上显示任何内容。第二个数据表列中的值必须是数字(
80
),而不是字符串('80'
)
请参阅以下工作片段
google.charts.load('current',{'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart2);
函数drawChart2(){
var data=google.visualization.arrayToDataTable([
['Label','Value'],
['发酵罐1',80],
[发酵罐2',55],
['发酵罐3',68],
[‘发酵罐4’,78],
[‘发酵罐5’,58],
[‘发酵罐6’,48],
[发酵罐7',38]
]);
变量选项={
宽度:400,高度:120,
红色从:90,红色到:100,
黄色从:75,黄色到:90,
米诺蒂克斯:5
};
var chart=new google.visualization.Gauge(document.getElementById('chart_div'));
图表绘制(数据、选项);
}
// Load the Visualization API and the chart package.
google.charts.load('current', { 'packages': ['gauge'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Fermenter 1', '80'],
['Fermenter 2', '55'],
['Fermenter 3', '68'],
['Fermenter 4', '78'],
['Fermenter 5', '58'],
['Fermenter 6', '48'],
['Fermenter 7', '38']
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}