Plotly.js 饼图值格式答案

【问题标题】：Plotly.js pie chart values formatPlotly.js 饼图值格式
【发布时间】：2017-04-20 09:51:52
【问题描述】：

我正在使用 Plotly.js 创建一些饼图，但我不知道如何设置值格式。如果我的号码是 19.231，我得到 19.2。我想要 19.2310，精度为 4 位。我的数据和布局如下：

var data = [{
    values: values,
    labels: labels,
    type: 'pie',
    marker: {
        colors: colors
    },
    textfont: {
        family: 'Helvetica, sans-serif',
        size: 48,
        color: '#000'
    }
}];
var layout = {
    height: 1350,
    width: 1500,
    title: title,
    titlefont: {
        family: 'Helvetica, sans-serif',
        size: 58,
        color: '#000'
    },
    legend: {
        x: 1.1,
        y: 0.5,
        size: 40,
        font: {
            family: 'Helvetica, sans-serif',
            size: 48,
            color: '#000'
        }
    }
};

【问题讨论】：

你能添加一些你的值来创建一个最小的、可验证的例子吗？
它们是根据用户输入在流程上生成的。值是浮点数，在逗号后自动将它们四舍五入到一位数。
如果你尝试var values = [1, 2, 4.6];，你会得到 13.2%、26.3% 和 60.5%，而不是 13.1579%、26.3158% 和 60.5263%

标签： javascript pie-chart plotly

【解决方案1】：

据我所知，您不能直接在 Plotly 中执行此操作，但您可以添加具有所需精度的 text 值并将 textinfo 设置为 text。

var values = [Math.random(), Math.random(), Math.random()];
var sum = values.reduce(function(pv, cv) { return pv + cv; }, 0);
var digits = 4;
var rounded_values = [];

for (var i = 0; i < values.length; i += 1) {
	rounded_values.push(Math.round(values[i]/sum * 100 * 10**digits) / 10**digits + '%');
}

var myPlot = document.getElementById('myPlot');
var data = [{
    values: values,
    type: 'pie',
    text: rounded_values,
	textinfo: 'text'
}];
Plotly.plot(myPlot, data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

【讨论】：

谢谢，这正是我所期待的。

【解决方案2】：

我看到文档找到了一些规则

关于它所说的高级悬停模板

      data: [
        {
          type: "scatter",
          mode: "markers",
          x: x,
          y: y,
          text: t,
          marker: { size: s, sizeref: 4000, sizemode: "area" },
          transforms: [{ type: "groupby", groups: c }],
          hovertemplate:
            "<b>%{text}</b><br><br>" +
            "%{yaxis.title.text}: %{y:$,.0f}<br>" +
            "%{xaxis.title.text}: %{x:.0%}<br>" +
            "Number Employed: %{marker.size:,}" +
            "<extra></extra>"
        }
      ],

您可以在此处将 %{y:$,.0f} 0f 更改为 4f 。像这样

hovertemplate: '%{y:$,.4f}',

Polt.ly JS document

【讨论】：