Heatmap.js Richtlinie für Angularjs

gibt es eine angularJS-Direktive für heatmap.js?

Kann nichts finden und kann es nicht zu funktionieren
Dank

= Edit =

Bekomme ich diese Fehlermeldung, ob ich in meinem code oder unten (beide arbeiten). Mein problem war eigentlich die version von der heatmap.js dass ich mit von der Laube. Bei mir ist der download min.js verwendet in der Geige hat alles Prima funktioniert.

TypeError: Cannot read property 'style' ist null
am Objekt.heatmap.Größe (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:363:74)
am Objekt.heatmap.init (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:386:20)
am Objekt.heatmap (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:331:14)
am Objekt.heatmapFactory.erstellen (http://localhost:56080/app/bower_components/heatmap.js/src/heatmap.js:627:24)
im link (http://localhost:56080/app/js/directives/MainDirective.js:9:36)

  • Warum nicht Sie erstellen warapper um heatmap.js
  • Ich schaute mir das an. Jeder Hinweis, wo zu beginnen. Kann ich nur dump die heatmap.js code in einer Richtlinie?
  • einfach für einige Zeit warten, ich arbeite auf einer einfachen Richtlinie für heatmap.js
  • klingt erstaunlich. Von "Zeit", meinen Sie Stunden, Tage oder Monate :p?
InformationsquelleAutor Matthieu | 2015-05-12
  1. 7

    Einfache wrapper-Richtlinie für 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 Beispiel Referenz-link

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

    • Können Sie mir bitte helfen mit einem Beispiel von arbor oder etwas ähnliches in angularjs für meine Frage?
    InformationsquelleAutor jad-panda
  2. 1

    jad-panda ' s Antwort (https://stackoverflow.com/a/30193896/3437606) ist wirklich hilfreich.

    Aber wenn Sie nicht wollen, um die Größe der heatmap hardcoded in css und wenden Sie Sie dynamicaly mit ng-style haben, müssen Sie die folgenden geringfügigen änderungen.

    HTML

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

    Controller

    fügen Sie einfach den style-Objekt, um die $scope wie

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

    Den rest der controler ist das gleiche wie in jad-panda ' s Antwort.

    Richtlinie

    .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);
            }

        };
    }])

    Den $Timeout ist notwendig, um sicherzustellen, dass die heatmap initialisiert wird in den nächsten digestcycle von AngularJs, wenn die ng-stylebereits angewendet.

    CSS

    Zuletzt die neue CSS:

    heat-map {
    position: relative;
    width: 100%;
    height: 100%;
}
heat-map div {
    height: 100%;
}
    InformationsquelleAutor Ohmen
  3. 0

    Gerade ein wrapper für oficial heatmap.js gehostet in der gleichen github-repository.

    Es kann heruntergeladen werden von: https://github.com/pa7/heatmap.js/blob/master/plugins/angular-heatmap/angular-heatmap.js

    Und es ist hier erklärt:
    https://www.patrick-wied.at/static/heatmapjs/plugin-angular-heatmap.html

    InformationsquelleAutor ezabaw
Schreibe einen Kommentar