说明

热度图的绘制有很多的方式现在我们采用plotly.js来绘制。

绘制

  • 新建一个页面,并引用plotly.js文件,添加div容器。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="myDiv">
        <!-- Plotly chart will be drawn inside this DIV -->
    </div>
    <script src="./index.js">

    </script>
</body>

</html>
  • 添加对应的js文件
var data = [
    {
        z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
        type: 'heatmap'
    }
];

Plotly.plot('myDiv', data);

这里写图片描述

这也是官网上给的例子,下面我们说说其它的一些属性。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐