时间戳

首页 > 解决方案 > 如何在 plotly 中为每个跟踪添加标签？

javascript - 如何在 plotly 中为每个跟踪添加标签？

问题描述

我无法弄清楚如何为热图中的每个跟踪添加标签，例如： 解释

正如您在上图中看到的，我有两条热图类型的轨迹，我想在每条轨迹下方添加轨迹名称。

以下是codepen链接：Codepen

添加代码：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
        <h1>Heatmap</h1>
        <div id="maincontainer">
                <div id="r1c2-content"></div>
        </div>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="charts.js"></script>
</body>
</html>

图表.js


let ra = (num)=>{
        data = []
        vals = [0, 0.5, 1]
        for(let i = 0; i < num; i++){
                data.push(vals[parseInt(Math.random()*vals.length)])
        }
        return data
}
let plot_heatmap = () => {
        // heatmap 
        var hmdata = [
                {
                        x0: 0.5,
                        y0: 0.5,
                        z: [[0,1], [1,0.5], [0.5,0]],
                        type: 'heatmap',
                        showscale: false,
                        showlegend: false,
                        colorscale: [
                                [0, 'green'],
                                [0.5, 'red'],
                                [1, 'yellow']                                
                        ],
                },
                {       
                        x0: 3.5,
                        y0: 0.5,
                        z: [[1, 0.5, 0.5], [0, 0.5, 0.5], [0, 1, 0.5]],
                        type: 'heatmap',
                        showscale: false,
                        colorscale: [
                                [0, 'green'],
                                [0.5, 'red'],
                                [1, 'yellow']                                
                        ],
                        autocolorscale: false
                },
                
        ];
        var layout = {
          height: 400,
          width: 500
        }
        Plotly.newPlot('r1c2-content', hmdata, layout);
}

plot_heatmap()

标签： javascriptplotlyplotly.js

解决方案

推荐阅读