Question

如果使用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

＆＃13;

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 + " " );
        }
      }
    }
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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传递给区间函数的数组。

Amcharts服务器温度的角度计

1 个答案: