猿问

如何在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 未定义错误。我犯了什么错误？


四季花海
浏览 197回答 1
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() {&nbsp; useEffect(() => {&nbsp; &nbsp; var heatmapInstance = h337.create({&nbsp; &nbsp; &nbsp; // only container is required, the rest will be defaults&nbsp; &nbsp; &nbsp; container: document.querySelector('.App')&nbsp; &nbsp; });&nbsp; &nbsp; // now generate some random data&nbsp; &nbsp; var points = [];&nbsp; &nbsp; var max = 0;&nbsp; &nbsp; var width = 840;&nbsp; &nbsp; var height = 400;&nbsp; &nbsp; var len = 200;&nbsp; &nbsp; while (len--) {&nbsp; &nbsp; &nbsp;var val = Math.floor(Math.random()*100);&nbsp; &nbsp; &nbsp;max = Math.max(max, val);&nbsp; &nbsp; &nbsp;var point = {&nbsp; &nbsp; &nbsp; x: Math.floor(Math.random()*width),&nbsp; &nbsp; &nbsp; y: Math.floor(Math.random()*height),&nbsp; &nbsp; &nbsp; value: val&nbsp; &nbsp; &nbsp;};&nbsp; &nbsp; &nbsp;points.push(point);&nbsp; &nbsp;}&nbsp; &nbsp;// heatmap data format&nbsp; var data = {&nbsp; &nbsp; max: max,&nbsp; &nbsp; data: points&nbsp; };&nbsp; // if you have a set of datapoints always use setData instead of addData&nbsp; // for data initialization&nbsp; heatmapInstance.setData(data);&nbsp;})&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; <h2>Start editing to see some magic happen!</h2>&nbsp; &nbsp; </div>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答