Wie kann ich Heatmap auf Svg Bild rendern?

Question

Derzeit arbeite ich an einer Webanwendung mit Angularjs. Ich muss Heat-Map auf einem Svg zeigen, um einige Analysen zu zeigen. Kann mir jemand eine JavaScript-Bibliothek vorschlagen?

Answer 1

Sie können eine benutzerdefinierte Direktive für dasselbe erstellen. Ich habe eine AngularJS verkleinerte Datei verwendet ...

(URL: https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js)

ich nichts mehr relevant auf GitHub oder anderswo finden könnte! Wenn Sie etwas finden, aktualisieren Sie das hier bitte.

Wie auch immer, ich habe versucht, eine kleine Heatmap mit dieser externen Datei zu erstellen, hoffe, das hilft!

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

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

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

 
    }; 
 
    });

heat-map { 
 
    width: 600px; 
 
    height: 300px; 
 
    display: block; 
 
} 
 

 
heat-map div { 
 
    height: 100%; 
 
}

<script src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="HeatMapCtrl"> 
 
    <heat-map data="heat_data"></heat-map> 
 
    </div> 
 
</div>