javascript – Google图表“K”而不是数千

我正在使用谷歌图表工具( 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"}}
          );
}