Plotly.js 饼图值格式
Plotly.js pie chart values format
我正在使用 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'
}
}
};
据我所知,您不能直接在 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>
我看了文档发现了一些规则
它说的关于 Advanced Hovertemplate
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}',
我正在使用 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'
}
}
};
据我所知,您不能直接在 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>
我看了文档发现了一些规则
它说的关于 Advanced Hovertemplate
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}',