Question

在下面我尝试点的工具提示来显示范围而不是确切的时间，例如而不是'5:30'它应该在工具提示中显示'5-6pm'。我尝试放置一个列角色但是它不会保持动态的图形范围

unknown attribute 'code1' for User

How to assign your color scale on raw data in heatmap.2()

Answer 1

您可以使用DataView为工具提示角色添加计算列

显示范围，
建议使用谷歌的DateFormat来获取开始和结束时间的小时和上午/下午以及计算结束时间的新日期

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Topping');
  data.addColumn('number', 'cat1');
  data.addRows([
    [new Date("2017-08-09T13:00:00.000Z"),145289],
    [new Date("2017-08-09T12:00:00.000Z"),138370],
    [new Date("2017-08-09T11:00:00.000Z"),117605],
    [new Date("2017-08-09T10:00:00.000Z"),81268],
    [new Date("2017-08-09T09:00:00.000Z"),59815],
    [new Date("2017-08-09T08:00:00.000Z"),51899]
  ]);

  var formatHour = new google.visualization.DateFormat({
    pattern: 'ha'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var oneHour = (1000 * 60 * 60);
      var rowDate = dt.getValue(row, 0);
      var rangeHour1 = formatHour.formatValue(rowDate);
      var rangeHour2 = formatHour.formatValue(new Date(rowDate.getTime() + oneHour));
      return rangeHour1 + '-' + rangeHour2;
    },
    type: 'string',
    role: 'tooltip'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view);
}

＆＃13;

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

＆＃13;

如何使用谷歌图表隐藏确切日期并在工具提示中显示范围

1 个答案: