Question

如果您查看此bar chart from Google's help documentation并将鼠标悬停在2011栏上，系统会弹出工具提示。

请注意，y轴标记为“Sales：1,500”，而x轴没有标签。如何在x轴上添加标签，使其显示为“Year：2011”？

我更喜欢使用默认工具提示而不是html工具提示。

Answer 1

当没有使用html工具提示时，只有几个选项...

1）使用工具提示列角色并在数据表中提供工具提示的内容......

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

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addRows([
    ['2010', 600, 'Year: 2010\nSales: 600'],
    ['2011', 1500, 'Year: 2011\nSales: 1500'],
    ['2012', 800, 'Year: 2012\nSales: 800'],
    ['2013', 1000, 'Year: 2013\nSales: 1000']
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataTable);
});

＆＃13;

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

＆＃13;

2）使用数字代替字符串作为x轴，
然后你可以使用对象表示法来提供x轴值（v:）和格式化值（f:）
{v: 2010, f: 'Year: 2010'}
默认情况下，工具提示将显示格式化的值

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

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('number', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addRows([
    [{v: 2010, f: 'Year: 2010'}, 600],
    [{v: 2011, f: 'Year: 2011'}, 1500],
    [{v: 2012, f: 'Year: 2012'}, 800],
    [{v: 2013, f: 'Year: 2013'}, 1000]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataTable, {
    hAxis: {
      format: '0',
      ticks: dataTable.getDistinctValues(0)
    }
  });
});

＆＃13;

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

＆＃13;

以上两个选项的主要缺点，你无法设置工具提示的样式 1）没有什么是大胆的 2）标签和价值都是粗体（年份：2011 ）

使用html工具提示，即可获得最佳效果以下是使用DataView ...

动态构建工具提示的示例

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addRows([
    ['2010', 600],
    ['2011', 1500],
    ['2012', 800],
    ['2013', 1000]
  ]);

  // build data view columns
  var viewColumns = [];
  for (var col = 0; col < dataTable.getNumberOfColumns(); col++) {
    addColumn(col);
  }
  function addColumn(col) {
    // add data table column
    viewColumns.push(col);

    // add tooltip column
    if (col > 0) {
      viewColumns.push({
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          // build custom tooltip
          var tooltip = '<div class="ggl-tooltip"><div>';
          tooltip += dt.getColumnLabel(0) + ':&nbsp;<span>';
          tooltip += dt.getValue(row, 0) + '</span></div>';
          tooltip += '<div>' + dt.getColumnLabel(col) + ':&nbsp;<span>';
          tooltip += dt.getFormattedValue(row, col) + '</span></div></div>';

          return tooltip;
        },
        p: {html: true}
      });
    }
  }
  var dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns(viewColumns);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  // use data view to draw chart
  chart.draw(dataView.toDataTable(), {
    tooltip: {
      isHtml: true
    }
  });
});

＆＃13;

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}

＆＃13;

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

＆＃13;

如何在Google折线图的工具提示中为x轴添加标签？

1 个答案: