我正在使用谷歌图表工具(
https://developers.google.com/chart/)来显示数据,有时候我的值真的很高(100.000).
我的图形尺寸相当小,100.000不符合,但是10万就可以了.
有没有办法配置vAxis在“K”中显示vAxis上的数字,如果值高于10k？
解决方法
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',['G',['H',['I',['J',345678],['K',['L',['M',['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,dataPoint / 1000);
formattedData.setFormattedValue(i,dataPoint.toString());
}
这将使数据看起来像890123,但绘图为890.123,所以轴看起来不错.如果要添加逗号,可以使用this和this等资源.我不会假设知道你的数据格式,所以如果你希望成千上万的分隔符,小数,或者鼠标悬停在图表上,你可以自己设计出来.
这是最后的工作代码：
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x',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,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"}}
);
}
