向 google 仪表底部标签添加后缀可防止其更改
Adding suffix to google gauge bottom label prevents it from changing
我有一个 google 仪表,它使用 PHP 从数据库中动态检索数据,问题是我希望仪表在我使用的底部标签中有一个后缀:
// This is what creates the problem
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatter.format(data, 1);
在我开始随着时间的推移更改仪表值之前,这一切正常。只有指针移动,底部的标签 表示 'value + %' 保持不变。
有人知道如何解决这个问题吗?!?
仪表代码:
function SOC() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['SOC', 10]
]);
var options = {
width: 250, height: 250,
redFrom: 0, redTo: 10,
yellowFrom: 10, yellowTo: 25,
minorTicks: 5,
majorTicks: ['0','25','50','75','100']
};
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatter.format(data, 1);
var chart = new google.visualization.Gauge(document.getElementById('SOC'));
chart.draw(data, options);
setInterval(function() {
$.ajax({
url: "soc.php",
dataType: "JSON",
data:{},
success: function(x){
console.log(x["SOC"]);
data.setValue(0, 1, x["SOC"] );
chart.draw(data, options);
}
});
}, 2000);
}
尝试在更新数据后调用 formatter.format(data, 1):
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
formatter.format(data, 1);
chart.draw(data, options);
}, 1000);
看看这个fiddle
我有一个 google 仪表,它使用 PHP 从数据库中动态检索数据,问题是我希望仪表在我使用的底部标签中有一个后缀:
// This is what creates the problem
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatter.format(data, 1);
在我开始随着时间的推移更改仪表值之前,这一切正常。只有指针移动,底部的标签 表示 'value + %' 保持不变。
有人知道如何解决这个问题吗?!?
仪表代码:
function SOC() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['SOC', 10]
]);
var options = {
width: 250, height: 250,
redFrom: 0, redTo: 10,
yellowFrom: 10, yellowTo: 25,
minorTicks: 5,
majorTicks: ['0','25','50','75','100']
};
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatter.format(data, 1);
var chart = new google.visualization.Gauge(document.getElementById('SOC'));
chart.draw(data, options);
setInterval(function() {
$.ajax({
url: "soc.php",
dataType: "JSON",
data:{},
success: function(x){
console.log(x["SOC"]);
data.setValue(0, 1, x["SOC"] );
chart.draw(data, options);
}
});
}, 2000);
}
尝试在更新数据后调用 formatter.format(data, 1):
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
formatter.format(data, 1);
chart.draw(data, options);
}, 1000);
看看这个fiddle