在 plotly.js 中向仪表指标添加百分比符号

Question

我有一个来自 plotly.js 的 gauge，目前看起来是这样的：

我需要将百分比符号添加到数字（本例中为 96）。努力实现这一目标：

我目前的数据和布局是：

var data = [{
    domain: {
      x: [0, 1],
      y: [0, 1]
    },
    value: 96,
    title: {
      text: "my title"
    },
    type: "indicator",
    mode: "gauge+number",
    gauge: {
      axis: {
        range: [0, 100],
        tickwidth: 0,
        tickformat: "",
        tickcolor: "transparent"
      },
      bar: {
        color: "limegreen"
      },
      bgcolor: "purple",
      borderwidth: 2,
      bordercolor: "white",
      steps: [{
        range: [0, 1],
        color: "grey"
      }, {
        range: [0, 1],
        color: "purple"
      }],
      threshold: {
        line: {
          color: "red",
          width: 4
        },
        thickness: 0.75,
        value: .75
      }
    }
  }];
  var config = {
    responsive: true,
    "displayModeBar": false
  }
  var layout = {
    width: 280,
    height: 200,
    margin: {
      t: 0,
      b: 0,
      l: 50,
      r: 50
    },
    paper_bgcolor: "transparent",
    font: {
      color: "whitesmoke",
      family: "Arial"
    }
  };
  Plotly.newPlot(target_id, data, layout, config)

Answer 1

在 value: 96, 下添加 number: { suffix: "%" }

在 plotly.js 中向仪表指标添加百分比符号

Add percentage symbol to gauge indictor in plotly.js

javascript

plotly.js