时间戳

首页 > 解决方案 > Google Charts hAxis：如何在信息框中添加文本？

charts - Google Charts hAxis：如何在信息框中添加文本？

问题描述

我希望这不是重复的。当用户点击图表中的一个点时，如何在信息框中添加“天数：”？

在此处输入图像描述

标签： chartsgoogle-visualization

解决方案

使用数据表中的对象表示法，
我们可以提供每个单元格的值 ( v:) 和格式化值 ( f:)
。 

{v: 12, f: 'Days: 12'}

默认情况下，工具提示将显示格式化的值。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ['x', 'Times'],
    [0, 0],
    [2, 0],
    [4, 0],
    [6, 0],
    [8, 0],
    [10, 0],
    [{v: 12, f: 'Days: 12'}, 22],
    [14, 0],
    [16, 0],
  ];

  var data = google.visualization.arrayToDataTable(chart_data);

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, {
    height: 400
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

没有任何选项可以更改默认工具提示。
但是我们可以添加我们自己的自定义工具提示。

首先，我们需要在数据中添加另一列。
在这个例子中。我使用数据视图。 

// create view with tooltip column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {  // <-- add column indexes for original columns
  // build custom tooltip column
  calc: function (dt, row) {
    var tooltip = '<div class="ggl-tooltip">';
    tooltip += '<div>' + dt.getColumnLabel(0) + ':&nbsp;';
    tooltip += dt.getFormattedValue(row, 0) + '</div>';
    tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;';
    tooltip += dt.getFormattedValue(row, 1) + '</div>';
    tooltip += '</div>';
    return tooltip;
  },
  p: {html: true},
  role: 'tooltip',
  type: 'string'
}]);

我们需要一些东西，
首先，在工具提示列上，我们需要为...指定一个属性 

  p: {html: true},

在选项中，我们需要设置... 

tooltip: {
  isHtml: true
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ['Days', 'Times'],
    [0, 0],
    [2, 0],
    [4, 0],
    [6, 0],
    [8, 0],
    [10, 0],
    [12, 22],
    [14, 0],
    [16, 0],
  ];

  var data = google.visualization.arrayToDataTable(chart_data);

  // create view with tooltip column
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {  // <-- add column indexes for original columns
    // build custom tooltip column
    calc: function (dt, row) {
      var tooltip = '<div class="ggl-tooltip">';
      tooltip += '<div>' + dt.getColumnLabel(0) + ':&nbsp;';
      tooltip += dt.getFormattedValue(row, 0) + '</div>';
      tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;';
      tooltip += dt.getFormattedValue(row, 1) + '</div>';
      tooltip += '</div>';
      return tooltip;
    },
    p: {html: true},
    role: 'tooltip',
    type: 'string'
  }]);

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view.toDataTable(), {
    height: 400,
    tooltip: {
      isHtml: true
    }
  });
});
.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip div {
  padding: 4px 4px 4px 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意：使用具有列属性的数据视图时存在错误。
绘制时，列属性不会传递到图表中。
所以我们必须在绘制之前将视图转换回数据表。
（见上面的片段）

view.toDataTable()

推荐阅读