Question

是否有heatmap.js的angularJS指令？

找不到任何东西，无法让它发挥作用感谢

=编辑=

无论是使用我的代码还是使用下面的代码（都兼容），我都会收到此错误。我的问题实际上是我从凉亭使用的heatmap.js的版本。当我下载小提琴中使用的min.js时，一切正常。

TypeError：无法读取null的属性'style' 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）在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）在链接（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

Answer 2

jad-panda的回答（https://stackoverflow.com/a/30193896/3437606）非常有帮助。

但是，如果您不想在css中对热图进行硬编码并使用ng-style动态应用它们，则必须进行以下微小更改。

HTML

<div ng-style="heatMapStyle">
    <heat-map data="passed_data"></heat-map>
</div>

控制器

只需将样式对象添加到$scope

即可

$scope.heatMapStyle = {
            "height": 100+ "px",
            "width": 150+ "px"
        };

控制器的其余部分与jad-panda的答案相同。

指令

.directive('heatMap', ['$timeout', function ($timeout) {
        return {
            restrict: 'E',
            scope: {
                data: '='
            },
            template: '<div container></div>',
            link: function (scope, ele, attr) {
                function init() {
                    scope.heatmapInstance = h337.create({
                        container: ele.find('div')[0]
                    });
                    scope.heatmapInstance.setData(scope.data);
                }
                //to ensure that the wrapping style is already applied
                $timeout(init,0);
            }

        };
    }])

$ timout对于确保在已应用ng-style时在AngularJs的下一个摘要周期中初始化热图是必不可少的。

CSS

最后一个新的CSS：

heat-map {
    position: relative;
    width: 100%;
    height: 100%;
}
heat-map div {
    height: 100%;
}

Answer 3

刚刚找到hotmap.js的一个官方包装器，托管在同一个github存储库中。

可以从以下网址下载：https://github.com/pa7/heatmap.js/blob/master/plugins/angular-heatmap/angular-heatmap.js

这里解释了： https://www.patrick-wied.at/static/heatmapjs/plugin-angular-heatmap.html

Angularjs的Heatmap.js指令

3 个答案:

HTML

控制器

指令

CSS