Google 饼图:四舍五入问题,小数点后两位
Google pie chart: rounding issue with 2 decimal percentages
我遇到了 Google 图表的问题。我想要一个饼图,显示所有带有标签图例的值,包括低于 0.1% 的非常小的值。
假设我有以下数据:
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 66],
['Sleep', 33.95],
['Eat', 0.05]
]);
(总匹配数达到 100)
现在的问题是,在计算百分比时,Google 图表对值进行四舍五入,导致 33.95 变为 34,因此 0.05 变为 0。
此处示例:https://jsfiddle.net/4qe7h21s/
有没有办法让图表引擎创建 2 位小数而不是 1 位小数的百分比?
因为没有更改格式或百分比精度的选项
首先,需要设置
sliceVisibilityThreshold: 0.0001
所以'Eat'
不属于'Other'
接下来,在数据中提供自定义格式的值
{v: 66, f: '66.00%'}
将 pieSliceText
和 tooltip.text
设置为 'value'
因为 'Eat'
的切片很小,所以使用
tooltip.trigger: 'selection'
看下面的例子,切片显示正确的百分比
单击 'Eat'
的图例项以查看工具提示
google.charts.load('current', {
callback: function () {
new google.visualization.PieChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 66, f: '66.00%'}],
['Sleep', {v: 33.95, f: '33.95%'}],
['Eat', {v: 0.05, f: '0.05%'}]
]),
{
height: 400,
legend: {
position: 'right'
},
pieSliceText: 'value',
sliceVisibilityThreshold: 0.0001,
title: 'My Daily Activities',
tooltip: {
showColorCode: true,
text: 'value',
trigger: 'selection'
},
width: 600
}
);
},
packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我仍然需要在悬停时显示工具提示,但不仅仅是在单击时,所以我找到了解决方案,使用处理事件 API:https://developers.google.com/chart/interactive/docs/events。这里有一点改进,适用于切片和图例悬停:
function mouseOverHandler(selection) {
chart.setSelection([selection]);
}
function mouseOutHandler() {
chart.setSelection();
}
google.visualization.events
.addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
.addListener(chart, 'onmouseout', mouseOutHandler);
这是一个完整的工作示例(基于@WhiteHat 的代码片段):
google.charts.load('current', {
callback: function () {
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 66, f: '66.00%'}],
['Sleep', {v: 33.95, f: '33.95%'}],
['Eat', {v: 0.05, f: '0.05%'}]
]),
{
height: 400,
legend: {
position: 'right'
},
pieSliceText: 'value',
sliceVisibilityThreshold: 0.0001,
title: 'My Daily Activities',
tooltip: {
showColorCode: true,
text: 'value',
trigger: 'selection'
},
width: 600
}
);
function mouseOverHandler(selection) {
chart.setSelection([selection]);
}
function mouseOutHandler() {
chart.setSelection();
}
google.visualization.events
.addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
.addListener(chart, 'onmouseout', mouseOutHandler);
},
packages: ['corechart', 'table']
});
#chart_div svg g:last-child > g:last-child {
pointer-events: none;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我遇到了 Google 图表的问题。我想要一个饼图,显示所有带有标签图例的值,包括低于 0.1% 的非常小的值。
假设我有以下数据:
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 66],
['Sleep', 33.95],
['Eat', 0.05]
]);
(总匹配数达到 100)
现在的问题是,在计算百分比时,Google 图表对值进行四舍五入,导致 33.95 变为 34,因此 0.05 变为 0。
此处示例:https://jsfiddle.net/4qe7h21s/
有没有办法让图表引擎创建 2 位小数而不是 1 位小数的百分比?
因为没有更改格式或百分比精度的选项
首先,需要设置
sliceVisibilityThreshold: 0.0001
所以'Eat'
不属于'Other'
接下来,在数据中提供自定义格式的值
{v: 66, f: '66.00%'}
将 pieSliceText
和 tooltip.text
设置为 'value'
因为 'Eat'
的切片很小,所以使用
tooltip.trigger: 'selection'
看下面的例子,切片显示正确的百分比
单击 'Eat'
的图例项以查看工具提示
google.charts.load('current', {
callback: function () {
new google.visualization.PieChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 66, f: '66.00%'}],
['Sleep', {v: 33.95, f: '33.95%'}],
['Eat', {v: 0.05, f: '0.05%'}]
]),
{
height: 400,
legend: {
position: 'right'
},
pieSliceText: 'value',
sliceVisibilityThreshold: 0.0001,
title: 'My Daily Activities',
tooltip: {
showColorCode: true,
text: 'value',
trigger: 'selection'
},
width: 600
}
);
},
packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我仍然需要在悬停时显示工具提示,但不仅仅是在单击时,所以我找到了解决方案,使用处理事件 API:https://developers.google.com/chart/interactive/docs/events。这里有一点改进,适用于切片和图例悬停:
function mouseOverHandler(selection) {
chart.setSelection([selection]);
}
function mouseOutHandler() {
chart.setSelection();
}
google.visualization.events
.addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
.addListener(chart, 'onmouseout', mouseOutHandler);
这是一个完整的工作示例(基于@WhiteHat 的代码片段):
google.charts.load('current', {
callback: function () {
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 66, f: '66.00%'}],
['Sleep', {v: 33.95, f: '33.95%'}],
['Eat', {v: 0.05, f: '0.05%'}]
]),
{
height: 400,
legend: {
position: 'right'
},
pieSliceText: 'value',
sliceVisibilityThreshold: 0.0001,
title: 'My Daily Activities',
tooltip: {
showColorCode: true,
text: 'value',
trigger: 'selection'
},
width: 600
}
);
function mouseOverHandler(selection) {
chart.setSelection([selection]);
}
function mouseOutHandler() {
chart.setSelection();
}
google.visualization.events
.addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
.addListener(chart, 'onmouseout', mouseOutHandler);
},
packages: ['corechart', 'table']
});
#chart_div svg g:last-child > g:last-child {
pointer-events: none;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>