我正在使用谷歌图表工具(https://developers.google.com/chart/)来显示数据,有时我的值非常高(100.000 +)。
我的图表尺寸非常小,而100.000不适合,但是100k会。 有没有办法我可以配置vAxis在vAxis上以“K”显示数字,如果有超过10k的值?
答案 0 :(得分:17)
简言之,
options['vAxis']['format'] = 'short';
答案 1 :(得分:9)
Google Visualization使用ICU Decimal Format的子集,可以使用DataView
或vAxis.format
进行设置。
不幸的是,该子集不包括除以1,000的能力。因此,您需要先操作数据。假设这是您的数据:
var data = google.visualization.arrayToDataTable([
['x', 'Data'],
['A', 123456],
['B', 234567],
['C', 456789],
['D', 890123],
['E', 789012],
['F', 789012],
['G', 890123],
['H', 456789],
['I', 234567],
['J', 345678],
['K', 345678],
['L', 345678],
['M', 123456],
['N', 123456]
]);
我们需要克隆数据,然后将每个点除以1,000。这是一种简单的方法:
var formattedData = data.clone();
for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
var dataPoint = formattedData.getValue(i, 1);
formattedData.setValue(i, 1, dataPoint / 1000);
}
然后我们可以对此进行图表设置并将格式设置为:vAxis: {format: "#,###k"}
- 但是存在问题。现在,当您将鼠标悬停在系列上时,您会注意到890,123显示为890.123!这不好,所以我们需要通过在循环中添加另一行来解决这个问题:
var formattedData = data.clone();
for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
var dataPoint = formattedData.getValue(i, 1);
formattedData.setValue(i, 1, dataPoint / 1000);
formattedData.setFormattedValue(i, 1, dataPoint.toString());
}
这将使数据看起来像890123,但绘制为890.123,因此轴看起来不错。如果您想添加逗号,可以使用this和this等资源。我不会假设你知道你的数据格式,所以如果你想要数千个分隔符或小数,或者当你将鼠标悬停在图表上时,我会让你自己计算出那个部分。
这是最终的工作代码:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Data'],
['A', 123456],
['B', 234567],
['C', 456789],
['D', 890123],
['E', 789012],
['F', 789012],
['G', 890123],
['H', 456789],
['I', 234567],
['J', 345678],
['K', 345678],
['L', 345678],
['M', 123456],
['N', 123456]
]);
// Clone data and divide by 1,000 in column 1
var formattedData = data.clone();
for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
var dataPoint = formattedData.getValue(i, 1);
formattedData.setValue(i, 1, dataPoint / 1000);
formattedData.setFormattedValue(i, 1, dataPoint.toString());
}
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(formattedData, {curveType: "function",
width: 500, height: 400,
vAxis: {format: "#,###k"}}
);
}
答案 2 :(得分:3)
Number Formats,您可以使用hAxis.format和vAxis.format控制标签编号的格式。
例如,{hAxis:{format:&#39;#,###%&#39;}}显示值&#34; 1,000%&#34;,&#34; 750%&# 34;和&#34; 50%&#34;对于值10,7.5和0.5。您还可以提供以下任何预设:
{format: 'none'}: displays numbers with no formatting (e.g., 8000000)
{format: 'decimal'}: displays numbers with thousands separators (e.g., 8,000,000)
{format: 'scientific'}: displays numbers in scientific notation (e.g., 8e6)
{format: 'currency'}: displays numbers in the local currency (e.g., $8,000,000.00)
{format: 'percent'}: displays numbers as percentages (e.g., 800,000,000%)
{format: 'short'}: displays abbreviated numbers (e.g., 8M)
{format: 'long'}: displays numbers as full words (e.g., 8 million)
答案 3 :(得分:1)
尝试将displayExactValues配置选项设置为true
:
是否显示缩小的圆形版本的值 图的顶部,以节省空间; false表示可能。对于 例如,如果设置为false,则56123.45可能显示为56.12k。
这应该会给你你想要的行为,虽然它没有给你明确的能力来设置你希望它开始使用'k'后缀的值。