用过canvas-gauges的jj进来帮忙看看呀。

zzr · 发表于 2017-12-10 08:31:25

这玩意到底带不带自动刷新重绘呀。。。

gauge.value = 12;代表图表显示的数值。这里可以用php获取，问题在于如何让这个定时刷新呀。

看着貌似是用gauge.update();，但百度谷歌官网愣是没找到是怎么用的、。

https://github.com/Mikhus/canvas-gauges

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图表测试</title>
<link rel="stylesheet" href="../fonts/fonts.css">
<script src="../gauge.min.js"></script>
</head>
<body style="background: #fff">
<canvas id="canvas-id"></canvas>
<script>
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 300,
height: 300,
units: "",
//title: "",
startAngle: 90,
ticksAngle: 180,
colorPlate: "#ffffff",
//colorPlateEnd: "#ffffff",
colorUnits: "#3CA7DB",
colorNumbers: "#534638",
colorNeedle: "#8E7860",
colorNeedleEnd: "#8E7860",
colorNeedleCircleOuter: "#8E7860",
colorNeedleCircleOuterEnd: "#8E7860",
colorNeedleShadowUp: "#8E7860",
colorNeedleShadowDown: "#8E7860",
colorMajorTicks: ["#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB"],
colorMinorTicks: "#EBEBEB",
minValue: 10,
maxValue: 35,
majorTicks: ["10","15","20","25","30","35"],
minorTicks: "2",
strokeTicks: true,
highlights: [
{
"from": 10,
"to": 17.99,
"color": "#B1B9CB"
},
{
"from": 18,
"to": 28.99,
"color": "#8FB9BD"
},
{
"from": 29,
"to": 35,
"color": "#FF9488"
}
],
//
highlightsWidth: 25,
numbersMargin: 12,
//
//barWidth: 20,
//barStrokeWidth: 0,
//barProgress: 1,
//barShadow: 0,
//
animation: true,
//animationDuration: 500,
animationRule: "linear",
animatedValue: true,
//animateOnInit: true,
borders: false,
valueBox: false,
needleType: "arrow",
needleEnd: 65,
needleWidth: 4,
needleCircleSize: 10,
needleCircleInner: false,
needleCircleOuter: true,
needleShadow: false,
borderShadowWidth: 0
}).draw();
gauge.value = 12;
gauge.update();
</script>
</body>
</html>

复制代码

wuting0122 · 发表于 2017-12-10 08:31:26

更新不用update ，设置 gauge.value 后就可以了。

var tick = 3000;
function update(){
var v = Math.floor(10 + Math.random() * 25 );
gauge.value = v;
setTimeout(update , tick);
//异步更新
/*
$.ajax('update_api' , function(resp){
gauge.value = resp;
setTimeout(update , tick);
});
*/
}
update();

复制代码

zzr · 发表于 2017-12-10 09:38:23

感觉loc现在一眼望去怎么全是看不懂的内容。。。。。。就如同现在的a5.。。。

膜法师 · 发表于 2017-12-10 09:39:35

zzr 发表于 2017-12-10 09:38
感觉loc现在一眼望去怎么全是看不懂的内容。。。。。。就如同现在的a5.。。。 ...

我跟你感觉一样的，而且你发的我也看不懂

zzr · 发表于 2017-12-10 15:27:02

wuting0122 发表于 2017-12-10 10:21
更新不用update ，设置 gauge.value 后就可以了。

厉害了，常年不更新的博客。。。
https://reruin.net/?p=23

确实直接设置就能用。。。。。不过原来直接以下操作就可以了。。现在貌似直接加入php不行了。。。

gauge.value = <?php
$ch = curl_init();
$timeout = 5;
curl_setopt ($ch, CURLOPT_URL, 'http://www.domain.com/');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);
echo $file_contents;
?>

复制代码

		自动登录	找回密码
密码			注册

用过canvas-gauges的jj进来帮忙看看呀。

最佳答案