我有一个 js 文件，它根据给定的点绘制热图。我希望用 reactjs 完成同样的工作。我该怎么做？热图.html：<!doctype html><html><head><meta charset="utf-8"><title>Heatmap Test Code</title><script src='http://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js'></script></head><body> <div id='heatMap' style="height: 742px"> <canvas width="1024" height="742" style="position:absolute; left: 0; top: 0"></canvas> </div></body><script> var heatmapInstance = h337.create({ container: document.getElementById('heatMap') }); var testData = { min: 0, max: 100, data: [{'x': 948, 'y': 71, 'value': 1}, {'x': 949, 'y': 70, 'value': 1}, {'x': 948, 'y': 69, 'value': 1}, {'x': 946, 'y': 67, 'value': 1}, {'x': 390, 'y': 39, 'value': 1}, {'x': 376, 'y': 39, 'value': 1}, {'x': 288, 'y': 16, 'value': 1}, {'x': 200, 'y': 12, 'value': 1}, {'x': 134, 'y': 12, 'value': 1}, {'x': 96, 'y': 12, 'value': 1}, {'x': 80, 'y': 12, 'value': 1}, {'x': 69, 'y': 15, 'value': 1}, {'x': 65, 'y': 17, 'value': 1}] }; heatmapInstance.setData(testData); </script></html>我在 reactjs 中尝试了以下内容：在 index.html 中：included the script in index.html (<script src="heatmap.min.js" ></script>)在 heat.js 中：export function heat(){ //code to draw heatmap }在 app.js 中：import {heat} from './heat';class App extends Component { componentWillMount(){ heat(); }当我在 reactjs 中运行代码时，它抛出 h337 未定义错误。我犯了什么错误？
1 回答
弑天下
TA贡献1818条经验 获得超8个赞
在npm install heatmap.js您可以使用以下代码创建基本工作热图之后：
App.js
import React, {useEffect} from "react";
import ReactDOM from "react-dom";
import h337 from "heatmap.js";
import "./styles.css";
function App() {
useEffect(() => {
var heatmapInstance = h337.create({
// only container is required, the rest will be defaults
container: document.querySelector('.App')
});
// 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
var data = {
max: max,
data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
})
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
添加回答
举报
0/150
提交
取消