我用过Google Developers制作4个仪表的代码。仪表具有确定仪表的最大值和最小值的属性，例如 max:20 min:0。当我创建 4 个仪表时，它们都具有相同的最大值和最小值。
我的问题很简单，是否可以为每个gauge设置不同的最大值和最小值？
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawGauge);
var gauge;
var gaugedata;
var gaugeOptions = {min: 0, max: 20, yellowFrom: 200, yellowTo: 250, redFrom: 0, redTo: 4, greenFrom: 4 , greenTo:20 ,
minorTicks: 5,animation:{
duration: 400,
startup: true,
easing: 'inAndOut',},
};
var gauge_text = 'Gauge';
function drawGauge() {
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', '0');
gaugeData.addColumn('number', '1');
gaugeData.addColumn('number', '2');
gaugeData.addColumn('number', '3');
gaugeData.addRows(4);
gaugeData.setCell(0, 0, 12, gauge_text);
gaugeData.setCell(0, 1, 18, gauge_text);
gaugeData.setCell(0, 2, 6, gauge_text);
gaugeData.setCell(0, 3, 10, gauge_text);
gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(gaugeData, gaugeOptions);
}
</script>
</head>
<body>
<div align="center" style="border:2px solid black; width:590px;height: 500px;">
<div align="top" id="gauge_div" style="width:590px; height:400px;"></div>
</body>
</html>
我对 html 不是很熟悉，因为这段代码是 Python 项目的次要部分，所以非常感谢任何想法或帮助。
提前致谢；
安德。
最佳答案
您需要为每组最小/最大值绘制单独的仪表图
请参阅以下工作片段，
绘制了四种不同的仪表图，每种具有不同的范围...
google.charts.load('current', {
packages: ['gauge']
}).then(function() {
var gauge;
var gaugedata;
var gaugeOptions = {
min: 0,
max: 20,
yellowFrom: 200,
yellowTo: 250,
redFrom: 0,
redTo: 4,
greenFrom: 4,
greenTo: 20,
minorTicks: 5,
animation: {
duration: 400,
startup: true,
easing: 'inAndOut',
},
};
var gauge_text = 'Gauge';
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', '0');
gaugeData.addColumn('number', '1');
gaugeData.addColumn('number', '2');
gaugeData.addColumn('number', '3');
gaugeData.addRows(1);
gaugeData.setCell(0, 0, 12, gauge_text);
gaugeData.setCell(0, 1, 18, gauge_text);
gaugeData.setCell(0, 2, 6, gauge_text);
gaugeData.setCell(0, 3, 10, gauge_text);
for (var i = 0; i < gaugeData.getNumberOfColumns(); i++) {
drawGauge(i);
}
var gaugeView;
function drawGauge(index) {
gaugeView = new google.visualization.DataView(gaugeData);
gaugeView.setColumns([index]);
gauge = new google.visualization.Gauge(document.getElementById('gauge_div_' + index));
if (index > 0) {
gaugeOptions.max = gaugeOptions.max + 20;
}
gauge.draw(gaugeView, gaugeOptions);
}
});.wrapper {
white-space: nowrap;
}
.gauge {
display: inline-block;
width: 140px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="wrapper">
<div class="gauge" id="gauge_div_0"></div>
<div class="gauge" id="gauge_div_1"></div>
<div class="gauge" id="gauge_div_2"></div>
<div class="gauge" id="gauge_div_3"></div>
</div>关于javascript - 为 Google Charts 设置不同的范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52318111/