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

Question

我希望这不是重复的。当用户点击图表中的点时，如何在信息框中添加 "Days: "？

Answer 1

在数据中使用对象表示法 table,
我们可以同时提供值 (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>

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

view.toDataTable()

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

Google Charts hAxis: How to prepend text in information box?

charts

google-visualization