javascript - 谷歌图表 : How to add a caption to the color axis

标签 javascript google-visualization caption

向气泡图颜色轴添加标题

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

示例

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

I want to add the caption in green letters at the top of the chart

这是来自 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>

我的问题

如何添加与上图类似的标题?

最佳答案

您可以为图表添加一个标题,该标题将放置在 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的标题,但它可以具有相同的效果。

关于javascript - 谷歌图表 : How to add a caption to the color axis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26735136/

相关文章:

Android - CaptioningManager 类

javascript - 在调用通过同一函数 [ session 超时] 显示计时器的 JavaScript 函数之前清除标签

json - 如何使用数据库中的数据绘制谷歌饼图(或 donut chart )

javascript - 将数据聚合为 Flot 时间图表的天、周、月

javascript - 谷歌图表 - 时间轴 : Scaling Axis

javascript - Google Charts - 更改条形图的颜色

vba - UserForm.Caption 有什么问题?

html - 嵌套表格上的标题元素和 100% 宽度

javascript - 基本的 javascript 帮助(获取火车站的输出)

javascript - Jquery fadein 和 fadeout 脚本不工作