heatmap.js v2.0 熱點圖外掛程式 使用demo例子，heatmap.jsdemo
heatmap.js 是目前適用範圍最廣的熱點圖外掛程式，他的實現原理是通過canvas來繪出熱點圖的地區點的，所以heatmap只能在支援html5的瀏覽器上使用。
顯示
demo代碼：
<html><body> <div id="heatmap" style="width:600px; height:400px;border: 1px solid;border-color: grey;"></div></body><script src="heatmap.min.js"></script><script type="text/javascript">// 建立一個heatmap執行個體對象// “h337” 是heatmap.js全域對象的名稱。可以使用它來建立熱點圖執行個體var heatmapInstance = h337.create({ //這裡直接指定熱點圖渲染的div了。 //heatmap支援自訂的樣式方案，具體可看官網api container: document.querySelector('#heatmap')}); //構建一些隨機資料點，這裡替換成你的業務資料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};//因為data是一組資料，所以直接setDataheatmapInstance.setData(data);//資料繫結還可以使用 addData(object|array) 方法/**//單個資料點的添加方式 var dataPoint = { x: 5, y: 15, value: 100};heatmapInstance.addData(dataPoint);//多個資料點的添加方式var dataPoints = [dataPoint1, dataPoint2, dataPoint3, dataPoint4];heatmapInstance.addData(dataPoints);**/</script></html>
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
