如何在 plotly.js 中的数字周围添加百分比

Question

我刚开始使用 plotly.js 并且我运行进入这个例子。我想以百分比显示所有单元格值。根据 Plotly doc https://plotly.com/javascript/reference/scatter/，如果 graph = scatter 那么我可以简单地添加 tickformat: ',.0%' 并且它完成了工作。但是如果类型是 table.

，这个技巧就不起作用了

有人可以帮忙吗？

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]]

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: "grey"},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    font: {family: "Arial", size: 11, color: ["black"]}
  }
}]

Plotly.newPlot('myDiv', data);

Answer 1

有一个选项 suffix，您可以使用 table 的兼容值数组来指定。有关详细信息，请参阅 this。

const suffix1 = [['', '', '', '', ''],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"]]; 
//use blank string in the places that don't need suffix.

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]];

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: "grey"},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    font: {family: "Arial", size: 11, color: ["black"]},
    suffix: suffix1 
  }
}]


Plotly.newPlot('myDiv', data);

<div id='myDiv' style="width:640px;height:320px">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

如何在 plotly.js 中的数字周围添加百分比

How to add percentage around numbers in plotly.js

plotly

grafana

plotly.js