如何在react js中使用用javascript编写的热图
我有一个 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回答
-
弑天下
在npm install heatmap.js您可以使用以下代码创建基本工作热图之后：App.jsimport 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);
随时随地看视频慕课网APP
相关分类
JavaScript