用于服务器温度的 Amcharts 角规答案

【问题标题】：Amcharts Angular gauge for server temprature用于服务器温度的 Amcharts 角规
【发布时间】：2017-04-30 08:29:39
【问题描述】：

如果使用 Angular Gauge Amcharts 检查服务器温度。如何使 randomValue 函数可以替换为实际值？为了实时预约体温。在这种情况下，我使用数据库

SELECT FROM TABLE WHERE server id='server-id'

得到的数据是：

`30 | 2017-04-30 16:20:01 (value and date)`

我们每 3 秒就座，值将替换

如何将值设置为每 3 秒更改一次？并且指针会在不刷新的情况下移动。

CHAR CODE 是

var gaugeChart = AmCharts.makeChart( "chartdiv", {
  "type": "gauge",
  "theme": "light",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 10,
    "bands": [ {
      "color": "#84b761",
      "endValue": 40,
      "startValue": 0
    }, {
      "color": "#fdd400",
      "endValue": 80,
      "startValue": 40
    }, {
      "color": "#cc4748",
      "endValue": 100,
      "innerRadius": "95%",
      "startValue": 80
    } ],
    "bottomText": "0",
    "bottomTextYOffset": -20,
    "endValue": 100
  } ],
  "arrows": [ {} ],
  "export": {
    "enabled": false
  }
} );

setInterval( randomValue, 3000 );

// set random value
function randomValue() {
  var value = Math.round( Math.random() * 90 );
  if ( gaugeChart ) {
    if ( gaugeChart.arrows ) {
      if ( gaugeChart.arrows[ 0 ] ) {
        if ( gaugeChart.arrows[ 0 ].setValue ) {
          gaugeChart.arrows[ 0 ].setValue( value );
          gaugeChart.axes[ 0 ].setBottomText( value + " " );
        }
      }
    }
  }
}

#chartdiv {
	width	: 90%;
	height	: 300px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

【问题讨论】：

标签： javascript angularjs json amcharts gauge

【解决方案1】：

你的方法看起来不错，这就是我使用$interval 的方法。您只需将 random 例程替换为调用从后端为您提供数据的服务

var valuesArray = getData(); // gets an array of numbers from a service

$interval(function(passesValuesArray) {

    for (var i=0; i<vm.chart.arrows.length; i++) {
        vm.chart.arrows[i].setValue(arrowValue );
    }
}, 3000, 0 ,false, valuesArray);

0 表示它将永远循环（或直到 $interval 被取消）

false 表示每次运行函数后不要运行摘要循环，如果您希望其他角度部分获取更改的值，则必须将其设置为 true

valuesArray 是作为passesValuesArray 传递给区间函数的数组。

【讨论】：