向饼图切片添加后缀/实体

Question

我用 Plotly.js 渲染了一个可爱的馅饼。在悬停时我显示百分比 + 绝对数字。我的绝对数字应该有一个后缀，即实体。我似乎无法将其添加到悬停状态？

屏幕截图中显示了我当前的悬停。

因此，在 343,630.5728 旁边，我希望呈现我的实体。还可以格式化千位和小数点分隔符。

Answer 1

您可以使用 customdata + hovertemplate 作为工具提示信息，使用 layout.separators 作为分隔符。

var data = [{
  values: [1023.4, 500, 600],
  labels: ['Residential', 'Non-Residential', 'Utility'],
  customdata: ['A', 'B', 'C'],
  hovertemplate: '%{label}<br>%{value} %{customdata}<br>%{percent}<extra></extra>',
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500,
  separators: ',.'
};

Plotly.newPlot('chart', data, layout);

<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.51.1/plotly.min.js"></script>
<div id="chart"></div>

向饼图切片添加后缀/实体

Add suffix / entity to pie chart slice

plotly

plotly.js