angularjs - Angularjs 的 Heatmap.js 指令

Question

是否有 heatmap.js 的 angularJS 指令？

找不到任何东西并且无法让它工作谢谢

= 编辑=

无论我使用我的代码还是下面的代码(两者都有效)，我都会收到此错误。我的问题实际上是我在凉亭使用的 heatmap.js 版本。当我下载 fiddle 中使用的 min.js 时，一切正常。

TypeError: Cannot read property 'style' of null at Object.heatmap.resize (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:363:74) at Object.heatmap.init (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:386:20) at Object.heatmap (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:331:14) at Object.heatmapFactory.create (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:627:24) at link (http://localhost:56080/app/js/directives/MainDirective.js:9:36)

Answer 1

heatmap.js 的简单包装指令

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <heat-map data="passed_data"></heat-map> 
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope) {

           // now generate some random data
            var points = [];
            var max = 0;
            var width = 840;
            var height = 400;
            var len = 200;

            while (len--) {
                var val = Math.floor(Math.random()*100);
                max = Math.max(max, val);
                var point = {
                    x: Math.floor(Math.random()*width),
                    y: Math.floor(Math.random()*height),
                    value: val
                };
                points.push(point);
            }
            // heatmap data format
            $scope.passed_data = { 
                max: max, 
                data: points 
            };
    })
    .directive('heatMap', function(){
        return {
            restrict: 'E',
            scope: {
                data: '='
            },
            template: '<div container></div>',
            link: function(scope, ele, attr){
                scope.heatmapInstance = h337.create({
                  container: ele.find('div')[0]
                });
                scope.heatmapInstance.setData(scope.data);
            }

        };
    });

CSS

heat-map {
    width: 840px;
    height: 400px;
    display: block;
}

heat-map div {
     height: 100%;   
}

JsFiddle - http://jsfiddle.net/jigardafda/utjjatuo/2/

heatmap.js 示例引用链接

http://www.patrick-wied.at/static/heatmapjs/example-minimal-config.html