如何在 PLOTLY JS 中为每个子图添加标题

Posted 2023-02-18

【中文标题】如何在 PLOTLY JS 中为每个子图添加标题

【英文标题】：How to add title to each subplot in PLOTLY JS

【发布时间】：2019-01-06 15:08:51

【问题描述】：

就像主题一样。 我从 plotly 阅读了文档，但没有找到任何有用的信息。也许有人知道如何在 PLOTLY JS 中为每个情节添加标题？

【参考方案1】：

目前您不能直接设置子图标题。 但是您可以使用annotation text 设置子图标题。

听到的是example

    //Set annotations text in layout configuration
annotations: [
        text: "First subplot",
          font: 
          size: 16,
           color: 'green',
        ,
        showarrow: false,
        align: 'center',
        x: 0.13, //position in x domain
        y: 1, //position in y domain
        xref: 'paper',
        yref: 'paper',
      ,
        
          text: "Second subplot",
          font: 
          size: 16,
          color: 'orange',
        ,
        showarrow: false,
        align: 'center',
        x: 0.9, //position in x domain
        y: 1,  // position in y domain
        xref: 'paper',
        yref: 'paper',
        
      ]

Annotation text plotly.js

【参考方案2】：

github 上有一个功能请求。在此讨论中，nicolaskruchten 发布了另一个解决方法：https://github.com/plotly/plotly.js/issues/2746#issuecomment-810195118。它仍在使用注释，但引用轴域。这具有相对于子图进行正确定位的优点，并且即使在缩放时注释也保持固定。

在要放置标题的轴上定义域（域是整个绘图画布的“份额”，子绘图轴是：

    layout: 
      xaxis:  
        domain: [0,0.48] ,
      ,
      xaxis2: 
        domain: [0.52, 1],
      
     

注释本身可以引用这个（或两个）轴上的域：

  annotations: [
    
      text: "X1 title",
      x: 0,
      xref: "x domain",
    ,
    
      text: "X2/Y2 title",
      x: 0,
      xref: "x2 domain",
    
  ]