Google图表：如何在色轴上添加标题

Question

Adding a Caption to the Bubble Chart Color Axis 向气泡图色轴添加标题

In a project I am going to use the Google Chart API for diplaying a bubble chart with three variables. 在一个项目中，我将使用Google Chart API来显示带有三个变量的气泡图。 I know how I can change the caption of the axis, but how can I add a caption to the color bar at the top of the chart? 我知道如何更改轴的标题，但是如何向图表顶部的颜色栏添加标题？

An Example 一个例子

I modified the example from the documentation in order to include axis labels. 我从文档中修改了示例，以包括轴标签。 Please not that the original does not have the green caption "How can I add a caption to this bar". 请不要在原件上没有绿色标题“如何向该栏添加标题”。

我想在图表顶部以绿色字母添加标题

This is the original source code from the Google documentation where I added the title property for the axis. 这是Google文档的原始源代码，我在其中添加了轴的title属性。 I tried to add a title property to the colorAxis, but it did not have any effect. 我试图将title属性添加到colorAxis，但是没有任何效果。

<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>

My Question 我的问题

How can I add a caption similar to the image above? 如何添加与上图类似的标题？

Answer 1

You can add a title for the chart that will be placed just above the colorAxis : 您可以为图表添加标题，该标题将位于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" }
};

It's not exactly the caption of the colorAxis , but it can have the same effect. 它不完全是colorAxis的标题，但是可以具有相同的效果。

Google图表：如何在色轴上添加标题

问题描述

Adding a Caption to the Bubble Chart Color Axis 向气泡图色轴添加标题

An Example 一个例子

My Question 我的问题

1 个解决方案

解决方案1
0 2015-07-15 08:32:50

Google图表：如何在色轴上添加标题

问题描述

Adding a Caption to the Bubble Chart Color Axis 向气泡图色轴添加标题

An Example 一个例子

My Question 我的问题

1 个解决方案

解决方案1 0 2015-07-15 08:32:50

解决方案1
0 2015-07-15 08:32:50