累积图指令
Cumulocity graph directive
我正在创建 angularJS 基于 cumulocity 的自定义应用程序。是否有我可以在 SDK 中使用的指令来显示图表?我也从 cumulocity 支持部门询问了这个问题,答案是他们的图表是用 D3 完成的,他们还给了我这个 link http://krispo.github.io/angular-nvd3/#/ 如果他们不提供给我,我如何获取该图表的数据开箱即用的指令?
例如,如果我 select 网关和子设备如何获取 selected 机器的数据?
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 支持,并没有显示图表的官方指令。最后我只是使用了这里的 Angular NVD3 指令:https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives
它需要一些更新和修复,但这就是解决问题的方法。
我正在创建 angularJS 基于 cumulocity 的自定义应用程序。是否有我可以在 SDK 中使用的指令来显示图表?我也从 cumulocity 支持部门询问了这个问题,答案是他们的图表是用 D3 完成的,他们还给了我这个 link http://krispo.github.io/angular-nvd3/#/ 如果他们不提供给我,我如何获取该图表的数据开箱即用的指令?
例如,如果我 select 网关和子设备如何获取 selected 机器的数据?
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 支持,并没有显示图表的官方指令。最后我只是使用了这里的 Angular NVD3 指令:https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives
它需要一些更新和修复,但这就是解决问题的方法。