【问题标题】：Google Charts: How to add a caption to the color axis谷歌图表：如何为颜色轴添加标题
【发布时间】：2014-12-31 08:13:21
【问题描述】：

为气泡图颜色轴添加标题

在一个项目中，我将使用 Google Chart API 来显示包含三个变量的气泡图。我知道如何更改轴的标题，但如何在图表顶部的颜色条中添加标题？

一个例子

我修改了文档中的示例以包含轴标签。请注意，原件没有绿色标题“如何在此栏添加标题”。

这是来自Google documentation 的原始源代码，我在其中添加了轴的标题属性。我尝试向 colorAxis 添加一个 title 属性，但没有任何效果。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']},
          hAxis: { title: "X AXIS" },
          vAxis: { title: "Y AXIS" }

        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我的问题

如何添加类似于上图的标题？

【问题讨论】：

标签： javascript google-visualization caption

【解决方案1】：

您可以为图表添加一个标题，该标题将放在colorAxis 的正上方：

var options = {
    title: 'How can I add a caption to this bar?',
    colorAxis: {colors: ['yellow', 'red']},
    hAxis: { title: "X AXIS" },
    vAxis: { title: "Y AXIS" }
};

这不完全是colorAxis 的标题，但它可以产生相同的效果。

【讨论】：