Home > Developer > Web Develop
Heatmap. js v2.0 hotspot map plug-in uses the demo example, heatmap. jsdemo
Heatmap. js is currently the most widely used hotspot map plug-in. Its implementation principle is to use canvas to plot the region of the hotspot map. Therefore, heatmap can only be used in browsers that support html5.
Display
Demo code:
<Html> <body> <div id = "heatmap" style = "width: 600px; height: 400px; border: 1px solid; border-color: gray; "> </div> </body> <script src =" heatmap. min. js "> </script> <script type =" text/javascript "> // create a heatmap Instance Object //" h337 "is heatmap. name of the js global object. You can use it to create a hotspot graph instance var heatmapInstance = h337.create ({// you can specify the div of the hotspot graph rendering directly here. // Heatmap supports custom style schemes. For details, refer to the official website api container: document. querySelector ('# heatmap')}); // construct random data points. replace them with your business data var points = []; var max = 0; var width = 600; 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) ;}var data = {max: max, data: points}; // setDataheatmapInstance directly because data is a group of data. setData (data); // data binding you can also use the addData (object | array) method/** // var dataPoint = {x: 5, y: 15, value: 100}; heatmapInstance. addData (dataPoint); // Add multiple data points using var dataPoints = [dataPoint1, dataPoint2, dataPoint3, dataPoint4]; heatmapInstance. addData (dataPoints); **/</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
