累积图指令答案

【问题标题】：Cumulocity graph directive累积图指令
【发布时间】：2016-12-01 20:22:40
【问题描述】：

我正在创建基于累积量的 angularJS 自定义应用程序。我可以在 SDK 中使用显示图表的指令吗？我也从 cumulocity 支持中询问了这个问题，答案是他们的图表是用 D3 完成的，他们还给了我这个链接 http://krispo.github.io/angular-nvd3/#/ 如果他们不向我提供开箱即用的指令，我该如何获取该图表的数据？

例如，如果我选择网关和子设备，我如何获取所选机器的数据？

【问题讨论】：

标签： iot cumulocity

【解决方案1】：

Google 图表具有数据查询功能。 Google 图表和 Angular 都是由 Google 制作的。您可以将其与 Angular 结合使用。

https://developers.google.com/chart/

例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['table']});
    google.charts.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
      google.visualization.drawChart({
        "containerId": "visualization_div",
        "dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
        "query":"SELECT 'Scoring Team', 'Receiving Team', 'Scorer', 'Minute of goal' FROM " +
                "1VlPiBCkYt_Vio-JT3UwM-U__APurJvPb6ZEJPg",
        "refreshInterval": 5,
        "chartType": "Table",
        "options": {}
     });
    }
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>

【讨论】：

您是否在 Cumulocity 中使用过谷歌图表？数据的格式很奇怪，所以我不知道这是否容易实现。

【解决方案2】：

所以我再次询问了 Cumulocity 支持，并且没有显示图表的官方指令。最后我只是从这里使用了 Angular NVD3 指令：https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives

它需要一些更新和修复，但这就是这样做的方法。

【讨论】：