如何在 svg 图像上渲染热图？

Question

目前我正在使用 Angularjs 开发一个 Web 应用程序。我需要在 svg 上显示热图以显示一些分析。谁能给我推荐一个 JavaScript 库？

Answer 1

您可以为此创建自定义指令。我使用了 angularjs 缩小文件...

（网址：https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js）

我在 github 或其他任何地方都找不到更相关的内容！如果您发现了什么，请在此处更新。

无论如何，我尝试使用这个外部文件创建一个小热图，希望这会有所帮助！

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>