charts - 谷歌图表 vAxis 标签的自定义格式

Question

我有一个面积图，在 vAxis 上我希望标签显示 # 小时。对于下面的数据，“总花费时间”列是总分钟数的整数。我希望 vAxis 标签显示为 # hrs。因此，例如，第一行将显示 31.3 小时。我没有找到为此创建自定义格式化程序的方法，我可以在其中将分钟转换为十进制小时并附加“hrs”后缀。有任何想法吗？谢谢。

var data = google.visualization.arrayToDataTable([
    ['Date', 'Deals Processed', 'Total Time Spent'],
    [ '12/17/2020', 4, 1878], 
    [ '12/18/2020', 3, 290], 
    [ '12/21/2020', 8, 2772], 
    [ '12/22/2020', 6, 1084], 
    [ '12/23/2020', 4, 1175]
]);

Answer 1

我们可以通过提供我们自己的刻度来自定义 y 轴标签。
对于每个报价单，我们可以使用对象表示法，并提供值 (v:) 和格式化值 (f:)

{v: 1878, f: '31.3 hrs'}

我们也可以使用相同的方法自定义鼠标悬停时的工具提示，
在数据表中。

['12/17/2020', 4, {v: 1878, f: '31.3 hrs'}],

或者我们可以在创建数据表后设置格式化值。

data.setFormattedValue(0, 2, (1878 / 60).toFixed(1) + ' hrs');

要构建刻度，我们可以使用数据表方法 --> getColumnRange(columnIndex)
这将返回一个具有 min 和 max
属性的对象我们可以用它来构建我们的 ticks 数组。

  // build y-axis labels
  var range = data.getColumnRange(2);
  var max = Math.ceil(range.max / 100) * 100;
  var ticks = [];
  for (var i = 0; i <= max + 600; i = i + 600) {
    ticks.push({
      v: i,
      f: (i / 60).toFixed(0) + ' hrs'
    });
  }

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Deals Processed', 'Total Time Spent'],
    [ '12/17/2020', 4, 1878],
    [ '12/18/2020', 3, 290],
    [ '12/21/2020', 8, 2772],
    [ '12/22/2020', 6, 1084],
    [ '12/23/2020', 4, 1175]
  ]);
  
  // format tooltip
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var minutes = data.getValue(i, 2);
    data.setFormattedValue(i, 2, (minutes / 60).toFixed(1) + ' hrs');
  }

  // build y-axis labels
  var range = data.getColumnRange(2);
  var max = Math.ceil(range.max / 100) * 100;
  var ticks = [];
  for (var i = 0; i <= max + 600; i = i + 600) {
    ticks.push({
      v: i,
      f: (i / 60).toFixed(0) + ' hrs'
    });
  }

  var options = {
    height: 400,
    vAxis: {
      ticks: ticks
    }
  };
  
  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>