npm 在ReactJS HeatMapjs中使用JavaScript库

kzmpq1sx 于 2023-06-23 发布在 React

关注(0)|答案(1)|浏览(121)

我需要帮助
我想用ReactJS中的这个heatmapjs的运行例子，怎样才能实现我心中的愿望呢🙂

代码沙箱live：https://it5gt4.csb.app/
code-sandbox代码编辑器：https://codesandbox.io/s/simple-heatmapjs-example-to-change-to-react-it5gt4?file=/index.html

这个代码只是一个热图图，它是x中的[x，y，z]图，y是正则笛卡尔图轴，颜色是值属性
我想把这个简单的例子转换成reactjs代码。
我不知道如何修改代码来实现我想要的。因为我觉得这很奇怪，ReactJS不希望我使用查询选择器来操作DOM，但我使用的库，想要捕获元素并使用它做一些事情。所以我甚至无法回答“你试了什么？“因为我错过了如何处理这个问题的概念。
提前感谢！祝你今天愉快

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Heatmap.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script>
    <style>
      #heatmapArea {
        width: 400px;
        height: 400px;
        position: relative; /* if not already set */
        border: black solid 4px;
      }
    </style>
  </head>
  <body>
    <div id="heatmapArea"></div>

    <script>
      var heatmapInstance = h337.create({
        container: document.querySelector("#heatmapArea"),
      });
      var points = [
        { x: 10, y: 10, value: 100 },
        { x: 100, y: 100, value: 50 },
        { x: 200, y: 200, value: 70 },
      ];

      heatmapInstance.setData({
        data: points,
        max: 100,
      });
    </script>
  </body>
</html>

我已经查过同样的问题了，但是旧的答案使用了类组件，或者对我来说太复杂了，无法使用相同的逻辑。

npm

来源：https://stackoverflow.com/questions/76240093/using-javascript-library-in-reactjs-heatmapjs

1条答案

按热度按时间

bkhjykvo1#

你可以试试这个代码。虽然它没有标签。
给你

import React, { useEffect, useRef, useState } from "react";
import h337 from "heatmap.js";

const HeatMap: React.FC = () => {
  useEffect(() => {
    if (!!document.querySelector(".heatmap")) {
      var heatmapInstance = h337.create({
        container: document.querySelector(".heatmap")!,
        radius: 10,
        maxOpacity: 0.5,
        minOpacity: 0,
        blur: 0.75,
      });

      var points = [];
      var max = 0;
      var width = 840;
      var height = 400;
      var len = 200;

      while (len--) {
        var val = Math.floor(Math.random() * 1000);
        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
      var data = {
        max: max,
        min: 0,
        data: points,
      };

      heatmapInstance.setData(data);
    }
  }, []);
  return (
    <div className="heatmap" style={{ width: "100%", height: "100" }}></div>
  );
};

export default HeatMap;

赞(0）回复(0）举报 2023-06-23

我来回答

npm 在ReactJS HeatMapjs中使用JavaScript库

1条答案

相关问题

热门标签

最新问答