Question

我正在尝试将keen.io JS SDK与angularJS应用程序集成。我写这些事件没有任何问题，但我在绘制图表时遇到了麻烦。

我使用资源管理器为图表生成javascript，但必须进行一些修改才能使角度兼容。不幸的是，当我到达实际调用client.draw（或者在我的情况下，keenClient.draw）的行时，我在keen.min.js文件中抛出一个错误，说“this.el（..）。appendChild（）不是功能“。

我将实际的div传递给方法，而不只是文本字符串，我可以在JS调试器中看到div正在被找到。 keenClient也被实例化，并且查询似乎没有错误地创建。所以我不确定发生了什么。这是我的控制器的样子：

'use strict';

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    templateUrl: 'view2/view2.html',
    controller: 'View2Ctrl'
  });
}])

.controller('View2Ctrl', ['$scope', function($scope, $document) {
   // write hit to keen
  var keenClient = new Keen({
    projectId: window.keenio_project_id, // String (required always)
    writeKey: window.keenio_write_key,   // String (required for sending data)
    readKey: window.keenio_read_key      // String (required for querying data)

    // protocol: "https",         // String (optional: https | http | auto)
    // host: "api.keen.io/3.0",   // String (optional)
    // requestType: "jsonp"       // String (optional: jsonp, xhr, beacon)
  });

    var pageHit = {
        "action": "loaded",
        "page": "view2"
    };

    keenClient.addEvent("pagehits", pageHit, function(err, res){
      if (err) {
          // there was an error!
          alert('Error sending keen.io stats');
      }
    });

     angular.element(Keen).ready(function (){

         var query = new Keen.Query("count", {
    eventCollection: "pagehits",
    groupBy: "page",
    interval: "hourly",
    timeframe: "this_3_days",
    timezone: "UTC"
  });

         var div = angular.element(document.getElementById("chart-wrapper"));

         keenClient.draw(query, div, 
             {
                 title: "Hits",
                 chartType: "columnchart"
             });

    });
}]);

我的观点很简单：

<div id="chart-wrapper" ng-controller="View2Ctrl"></div>

我使用angular 1.4.8导入keen.io版本3.3.0。

提前感谢任何建议。我对棱角分明和keen.io都很陌生，所以我可能会在这里遗漏一些傻事。

Answer 1

经过几个小时的故障排除后，我尝试使用Keen.Dataviz（）选项而不是client.draw（）进行图形处理，并立即生效。所以我认为他们的简单语法不是Angular兼容的。

＆＃13;

 var chart = new Keen.Dataviz() 
             .el(document.getElementById("chart-wrapper")) 
             .chartType("columnchart") 
             .prepare(); 
         var req = keenClient.run(query, function(err, res){ 
             if(err){ 
                 chart.err(err.message) 
             } 
             else{ 
                 chart.parseRequest(this).title("Hits").render(); 
             } 
         });  
        setInterval(function() { 
               req.refresh();
        }, 60000);

＆＃13;

如果有人有办法让其他语法正常工作，我仍然会很好奇，尽管我可以这样做我需要做的事情。

调用client.draw（）时，this.el（..）。appendChild（）不是函数错误

1 个答案: