javascript - 在谷歌图表蜡烛中以短格式显示总数
问题描述
我想在谷歌图表中以短格式显示数字。
前任。1,300,000 是 '1.3M'
这是片段...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
var data = google.visualization.arrayToDataTable([
['Element', '', { role: 'style' }],
['> 60 Days', 1300000, '#005073'],
['45 - 60 Days', 850000, '#006b96'],
['30 - 45 Days', 500000, '#017CAD'],
['15 - 30 Days', 300000, 'color: #00b1dd'],
['< 15 Days', 100000, 'color: #00bceb'],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
},
2]);
var options = {
width: 345,
height: 280,
'chartArea': { 'width': '70%', 'height': '100%' },
bar: { groupWidth: '80%' },
legend: { position: 'none' },
hAxis: { textPosition: 'none' },
vAxis: { format: 'sort' }
};
var chart = new google.visualization.BarChart(
document.getElementById('unCoveredProducts'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="unCoveredProducts"></div>
解决方案
使用NumberFormat
类...
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
formatShort.format(data, 1);
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
var data = google.visualization.arrayToDataTable([
['Element', '', { role: 'style' }],
['> 60 Days', 1300000, '#005073'],
['45 - 60 Days', 850000, '#006b96'],
['30 - 45 Days', 500000, '#017CAD'],
['15 - 30 Days', 300000, 'color: #00b1dd'],
['< 15 Days', 100000, 'color: #00bceb'],
]);
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
formatShort.format(data, 1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
},
2]);
var options = {
width: 345,
height: 280,
'chartArea': { 'width': '70%', 'height': '100%' },
bar: { groupWidth: '80%' },
legend: { position: 'none' },
hAxis: { textPosition: 'none' },
vAxis: { format: 'sort' }
};
var chart = new google.visualization.BarChart(
document.getElementById('unCoveredProducts'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="unCoveredProducts"></div>
推荐阅读
- sql - SQL 每个账户 ID 只返回 1 行
- html - 从 Shinymanager 中删除 html 元素
- jenkins - jenkins pod 找不到自己的本地程序
- .htaccess - 使用 .htaccess 使单词不区分大小写
- c - PAUSE 指令 - RISC-V 中无法识别的操作码“暂停”
- javascript - Javascript为内部函数返回未定义
- python - 反转每个 K 元素子列表
- google-cloud-platform - gcp 云函数批量处理
- python - 如果 __name__=="__main__": 出现错误,我创建了两个文件,其中一个是我编码的 score.py,第二个是 import score.py 的 two.py
- ubuntu-21.04 - 在运行 gdalinfo 时最近升级后在 Ubuntu 21.04 上出现错误