Heatmap.js Angularjs 指令

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例子参考link

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

Answer 2

jad-panda 的回答 () 真的很有帮助。

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

HTML

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

控制器

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

$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 对于确保在 AngularJs 的下一个摘要周期中初始化热图至关重要，而 ng-style 已经应用。

CSS

最后一个新 CSS:

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

Answer 3

刚刚找到 heatmap.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

Heatmap.js Angularjs 指令

Heatmap.js directive for Angularjs

heatmap

angularjs

HTML

控制器

指令

CSS