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

【问题标题】：How to add title to each subplot in PLOTLY JS如何在 PLOTLY JS 中为每个子图添加标题
【发布时间】：2019-01-06 15:08:51
【问题描述】：

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

【问题讨论】：

标签： javascript graph title 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",
    }
  ]

【讨论】：