可视化：柱形图

概览

柱形图是指在浏览器中使用 SVG 或 VML（具体取决于用户浏览器）呈现的纵向条形图。与所有 Google 图表一样，柱形图会在用户将鼠标悬停在数据上时显示提示。如需查看此图表的横向版本，请参阅条形图。

示例

为列着色

让我们绘制四种贵金属的密度：

上面的所有颜色均默认为蓝色。这是因为它们都属于同一系列；如果有第二个系列，则会显示为红色。我们可以使用样式角色自定义这些颜色：

有三种不同的颜色选择方式，我们的数据表将其全部展示了：RGB 值、英文颜色名称和类似 CSS 的声明： 

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

列样式

样式角色可让您使用类似 CSS 的声明控制列外观的以下几个方面：

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

我们建议您不要在图表内过于随意地混合样式，建议您选择一种样式并坚持使用，但为了演示所有样式属性，我们使用了一个采样器：

前两列使用特定的 color（第一列使用英文名称，第二列使用 RGB 值）。未选择任何 opacity，因此会使用默认值 1.0（完全不透明）；因此，第二列会遮盖其后面的网格线。在第三列中，使用的 opacity 为 0.2，这表示网格线。第 4 个示例使用了三个样式属性：stroke-color 和 stroke-width 用于绘制边框，而 fill-color 用于指定内部矩形的颜色。最右边的列还使用 stroke-opacity 和 fill-opacity 为边框和填充选择不透明度： 

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

为列添加标签

图表具有多种标签，例如刻度标记、图例标签和提示中的标签。在本部分中，我们将介绍如何在柱形图的列内（或附近）添加标签。

假设我们想要为每一列添加适当的化学符号。我们可以使用 annotation 角色执行此操作：

在数据表中，我们使用 { role: 'annotation' } 定义一个新列，用于保存列标签：

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

虽然用户可以将鼠标悬停在列上查看数据值，但您可能希望将它们添加到列本身中：

这会比应该的复杂一点，因为我们创建一个 DataView 来指定每一列的注释。

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

如果要为值设置不同的格式，可以定义 formatter，并将其封装在函数中，如下所示： 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

然后，我们可以使用 calc: getValueAt.bind(undefined, 1) 调用它。

如果标签太大，无法完全放入列内，则会显示在外部：

堆叠柱形图

堆叠柱形图是一种将相关值堆叠在一起的柱形图。如果存在任何负值，它们会按反向顺序堆叠在图表基准下方。通常在某个类别自然划分为多个组成部分时使用。例如，假设一些图书销售情况按类型划分，并在不同时间段进行了比较：

如需创建堆叠柱形图，请将 isStacked 选项设置为 true： 

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

堆叠柱形图还支持 100% 堆叠，即重新缩放每个域值处的元素堆栈，使之和等于 100%。此选项的选项包括 isStacked: 'percent'（将每个值的格式设置为 100% 的百分比）和 isStacked: 'relative'（将每个值的格式设置为 1 的分数形式）。此外，还有一个 isStacked: 'absolute' 选项，它的功能等同于 isStacked: true。

请注意，在右侧的 100% 堆叠图表中，刻度值基于相对 0-1 的刻度（以 1 的分数表示），但轴值显示为百分比。这是因为百分比轴刻度是将“#.##%”格式应用于相对 0-1 刻度值的结果。使用 isStacked: 'percent' 时，请务必使用相对 0-1 的刻度指定任何刻度/轴值。

堆叠
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
100% 堆叠
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

创建 Material 柱形图

2014 年，Google 发布了相关准则，旨在让 Google 平台的各种媒体资源和应用（例如 Android 应用）具有统一的外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本；如果您喜欢它们的外观，则可以使用它们。

Material 柱形图的创建过程类似于我们现在所说的“经典”柱形图的创建过程。您加载 Google Visualization API（尽管使用 'bar' 软件包而不是 'corechart' 软件包），定义数据表，然后创建一个对象（但不是 google.charts.Bar 类，而不是 google.visualization.ColumnChart 类）。

由于条形图和柱形图在方向方面基本相同，因此无论柱形是竖直（通常为柱形图）还是水平（条形图），我们都将其称为 Material 条形图。在 Material 中，唯一的区别在于 bars 选项。设置为 'horizontal' 时，方向与传统的经典条形图表类似；否则，条形将是垂直的。

注意：Material 图表在旧版 Internet Explorer 中无法使用。（IE8 及更低版本不支持 Material 图表所需的 SVG。）

与传统柱形图相比，Material 柱形图有很多小的改进，包括改进了调色板、圆角、更清晰的标签格式、更紧密的系列之间的默认间距、更柔和的网格线和标题（以及添加了字幕）。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Material 图表目前处于 Beta 版阶段。其外观和互动性基本上是最终决定，但是传统图表中的许多选项目前还没有在旧版图表中提供。您可以在此问题中找到尚不支持的选项列表。

此外，选项的声明方式并非最终确定，因此，如果您使用的是任何传统选项，则必须将以下代码行转换为 Material 选项：

chart.draw(data, options);


...将其替换为以下代码：

chart.draw(data, google.charts.Bar.convertOptions(options));

通过 google.charts.Bar.convertOptions()，您可以利用某些功能，如 hAxis/vAxis.format 预设选项。

双 Y 图表

有时，您可能希望在柱形图中显示两个系列，并且具有两条独立的 Y 轴：一个系列的左轴，另一个系列的右轴：

请注意，不仅两条 y 轴标记方式不同（“解析器”与“视级”），而且它们都有自己独立的刻度和网格线。如果要自定义此行为，请使用 vAxis.gridlines 选项。

在下面的代码中，axes 和 series 选项共同指定图表的双 Y 外观。series 选项指定为每个轴使用哪个轴（'distance' 和 'brightness'；它们与数据表中的列名称没有任何关系）。axes 选项随后可将此图表转换为双 Y 图表，将 'distance' 轴置于左侧（标记为“parsecs”），'brightness' 轴置于右侧（标记为“apparent magnitude”）。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

热门排行榜

注意：前 X 轴仅适用于 Material 图表（即包含软件包 bar 的图表）。

如果要将 X 轴标签和标题放置在图表顶部而不是底部，您可以在 Material 图表中使用 axes.x 选项执行此操作：

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

正在加载

google.charts.load 软件包名称为 "corechart"。该可视化图表的类名称为 google.visualization.ColumnChart。 

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.ColumnChart(container);

对于 Material 柱形图，google.charts.load 软件包名称为 "bar"。（并非拼写错误：Material 条形图会同时处理这两种方向。） 该可视化图表的类名称为 google.charts.Bar。（并非拼写错误：Material 条形图可处理两种屏幕方向。）

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

数据格式

表格中的每一行代表一组相邻的条形。

行：表格中的每一行代表一组条形。

列：

  第 0 列 第 1 列 ... 第 N 列
用途：
  • X 轴组标签（离散）
  • X 轴值（连续）
该组中的条形 1 值 ... 该组中的条形 N 值
数据类型：
  • 字符串（离散）
  • 数字、日期、日期时间或
    timeofday（连续）
number ... number
角色： 网域 data ... data
可选的列角色： ...

 

配置选项

名称
animation.duration

动画的时长（以毫秒为单位）。如需了解详情，请参阅动画文档。

类型：数字
默认值：0
animation.easing

应用于动画的加/减速函数。提供的选项如下：

  • “Linear”- 恒定速度。
  • “in”- 缓入 - 开始时要慢，速度快。
  • '出' - 缓出 - 快速启动，然后放慢速度。
  • 'inAndOut' - 缓入和缓出 - 开始时要慢，加速，然后慢。
类型：字符串
默认值：“线性”
animation.startup

确定图表是否在首次绘制时呈现动画效果。如果为 true，则图表将从基线开始，并以动画方式达到其最终状态。

类型：布尔值
默认值 false
annotations.alwaysOutside

在 Bar 和 Column 图表中，如果设置为 true，则会在 Bar/Column 之外绘制所有注解。

类型：布尔值
默认值：false
annotations.boxStyle

对于支持注释的图表，annotations.boxStyle 对象用于控制注释周围文本框的外观： 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

目前，此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。注释图表不支持此功能。

类型：object
默认值：null
annotations.datum
对于支持注释的图表，annotations.datum 对象可让您覆盖 Google 图表为个别数据元素提供的注释（例如，条形图上每个条形显示的值）的选择。您可以使用 annotations.datum.stem.color 控制颜色，使用 annotations.datum.stem.length 控制树干长度，使用 annotations.datum.style 控制样式。
类型：object
默认：颜色为“黑色”；长度为 12；样式为“点”。
annotations.domain
对于支持注释的图表，借助 annotations.domain 对象，您可以替换 Google 图表为某个网域（图表的长轴，例如典型折线图上的 X 轴）提供的注释选择。您可以使用 annotations.domain.stem.color 控制颜色，使用 annotations.domain.stem.length 控制树干长度，使用 annotations.domain.style 控制样式。
类型：object
默认：颜色为“黑色”；长度为 5；样式为“点”。
annotations.highContrast
对于支持注释的图表，您可以使用 annotations.highContrast 布尔值替换 Google 图表选择的注释颜色。默认情况下，annotations.highContrast 为 true，这会导致图表选择对比度良好的注释颜色：浅色背景配深色，深色配浅色。如果您将 annotations.highContrast 设为 false 并且未指定自己的注释颜色，Google 图表将为注释使用默认系列颜色：
类型：布尔值
默认值：true
annotations.stem
对于支持注释的图表，您可以使用 annotations.stem 对象替换 Google 图表为主干样式选择的图表。您可以使用 annotations.stem.color 控制颜色，使用 annotations.stem.length 控制茎长度。请注意，主干长度选项对样式为 'line' 的注释没有影响：对于 'line' 基准注释，主干长度始终与文本相同；对于 'line' 域注释，主干长度会延伸在整个图表中。
类型：object
默认：颜色为“black”；域注释的长度为 5 个字符，数据注释的长度为 12 个字符。
annotations.style
对于支持注释的图表，您可以使用 annotations.style 选项替换 Google 图表选择的注释类型。可为 'line' 或 'point'。
类型：字符串
默认值：“point”
annotations.textStyle
对于支持注释的图表，annotations.textStyle 对象用于控制注释文本的外观： 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

目前，此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。 注释图表 不支持此功能。

类型：object
默认值：null
axisTitlesPosition

轴标题的放置位置（相对于图表区域）。支持的值：

  • in - 在图表区域内绘制轴标题。
  • out - 在图表区域外绘制轴标题。
  • none - 省略轴标题。
类型：字符串
默认值：“out”
backgroundColor

图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 'red' 或 '#00cc00'），也可以是具有以下属性的对象。

类型：字符串或对象
默认：“white”
backgroundColor.stroke

图表边框的颜色，以 HTML 颜色字符串表示。

类型：字符串
默认：“#666”
backgroundColor.strokeWidth

边框宽度（以像素为单位）。

类型：数字
默认值：0
backgroundColor.fill

图表的填充颜色，采用 HTML 颜色字符串的形式。

类型：字符串
默认：“white”
bar.groupWidth
一组条形的宽度，可采用以下任一格式指定：
  • 像素（例如 50）。
  • 每个组的可用宽度百分比（例如“20%”），其中“100%”表示各组之间没有间距。
类型：数字或字符串
默认值：黄金比例，约为“61.8%”。
条形

Material 条形图中的条形是垂直还是水平。此选项对传统条形图或传统柱形图没有影响。

类型：“水平”或“垂直”
默认：“vertical”
chartArea

一个对象，其中包含用于配置图表区域（绘制图表本身，不包括轴和图例）的位置和大小的成员。支持两种格式：数字或数字后跟 %。简单数字是以像素为单位的值；数字后跟 % 表示百分比。示例：chartArea:{left:20,top:0,width:'50%',height:'75%'}

类型：object
默认值：null
chartArea.backgroundColor
图表区域背景颜色。使用字符串时，它可以是十六进制字符串（例如，'#fdc') 或英文颜色名称。使用对象时，可以提供以下属性：
  • stroke：颜色，以十六进制字符串或英文颜色名称的形式提供。
  • strokeWidth：如果提供，则会在具有指定宽度（颜色为 stroke）的图表区域周围绘制边框。
类型：字符串或对象
默认：“white”
chartArea.left

从左侧边框绘制图表的距离。

类型：数字或字符串
默认：auto
chartArea.top

从顶部边框绘制图表的距离。

类型：数字或字符串
默认：auto
chartArea.width

图表区域宽度。

类型：数字或字符串
默认：auto
chartArea.height

图表区域高度。

类型：数字或字符串
默认：auto
chart.subtitle

对于材质图表，此选项会指定副标题。只有 Material 图表支持字幕。

类型：字符串
默认值：null
chart.title

对于 Material 图表，此选项会指定标题。

类型：字符串
默认值：null
颜色

用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如：colors:['red','#004411']。

类型：字符串数组
默认：默认颜色
dataOpacity

数据点的透明度，1.0 表示完全不透明，0.0 表示完全透明。 在散点图、直方图、条形图和柱形图中，这指的是可见数据：散点图中的点和矩形中的矩形。在选择数据会创建一个点的图表（如折线图和面积图）中，是指在光标悬停或选择时显示的圆形。组合图表展示了这两种行为，此选项对其他图表没有影响。（如需更改趋势线的不透明度，请参阅 趋势线不透明度 。）

类型：数字
默认值：1.0
enableInteractivity

图表是抛出基于用户的事件，还是对用户互动做出响应。如果为 false，则图表不会抛出“select”或其他基于互动的事件（但会抛出 ready 事件或 error 事件），也不会显示悬停文本或根据用户输入进行其他更改。

类型：布尔值
默认值：true
explorer

explorer 选项允许用户平移和缩放 Google 图表。explorer: {} 提供了默认的探索器行为，让用户能够通过拖动进行水平和垂直平移，以及通过滚动进行缩放。

此功能是实验性功能，可能会在未来版本中发生变化。

注意：分层图表仅适用于连续轴（例如数字或日期）。

类型：object
默认值：null
explorer.actions

Google 图表浏览器支持三种操作：

  • dragToPan：拖动可在图表水平和垂直方向上平移。如需仅沿水平轴平移，请使用 explorer: { axis: 'horizontal' }。 纵轴也是如此。
  • dragToZoom：该探索器的默认行为是在用户滚动时放大和缩小。如果使用了 explorer: { actions: ['dragToZoom', 'rightClickToReset'] }，在矩形区域上拖动可放大该区域。我们建议每使用 dragToZoom 都使用 rightClickToReset。有关缩放自定义，请参阅 explorer.maxZoomIn、explorer.maxZoomOut 和 explorer.zoomDelta。
  • rightClickToReset：右键点击图表可将其恢复到原始的平移和缩放级别。
类型：字符串数组
默认值：['dragToPan', 'rightClickToReset']
explorer.axis

默认情况下，使用 explorer 选项时，用户可以同时水平和垂直平移。如果您只想用户水平平移，请使用 explorer: { axis: 'horizontal' }。同样，explorer: { axis: 'vertical' } 支持仅垂直平移。

类型：字符串
默认：同时进行水平和垂直平移
explorer.keepInBounds

默认情况下，无论数据位于何处，用户都可以平移。为确保用户不会平移到原始图表以外，请使用 explorer: { keepInBounds: true }。

类型：布尔值
默认值：false
explorer.maxZoomIn

探索器可以放大的最大数值。默认情况下，用户可以放大到只有 25% 的原始视图。设置 explorer: { maxZoomIn: .5 } 会让用户只能放大到可以看到原始视图的一半。

类型：数字
默认值：0.25
explorer.maxZoomOut

探索器可以缩小的最大值。默认情况下，用户能够将图表缩小到仅占可用空间的 1/4。设置 explorer: { maxZoomOut: 8 } 可以允许用户足够缩小，以至于图表仅占可用空间的 1/8。

类型：数字
默认值：4
explorer.zoomDelta

当用户执行缩放操作时，explorer.zoomDelta 会决定用户的缩放程度。数字越小，变焦越流畅，速度越慢。

类型：数字
默认值：1.5
focusTarget

鼠标悬停时获得焦点的实体的类型。还会影响鼠标点击选择哪个实体，以及哪个数据表元素与事件相关联。可以是下列选项之一：

  • “datum”- 关注单个数据点。与数据表中的单元格相关。
  • “category”- 聚焦于主轴上所有数据点的分组。与数据表中的行相关。

在 focusTarget“category”中，提示会显示所有类别值。这对于比较不同系列的值可能很有用。

类型：字符串
默认：“datum”
fontSize

图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。

类型：数字
默认：自动
fontName

图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。

类型：字符串
默认：“Arial”
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

类型：布尔值
默认值：false
hAxis

包含成员（用于配置各种横轴元素）的对象。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
类型：object
默认值：null
hAxis.baseline

横轴的基线。

只有 continuous 轴支持此选项。

类型：数字
默认：自动
hAxis.baselineColor

横轴基线的颜色。可以是任何 HTML 颜色字符串，例如：'red' 或 '#00cc00'。

只有 continuous 轴支持此选项。

类型：数字
默认：“black”
hAxis.direction

值沿水平轴的增长方向。指定 -1 会反转值的顺序。

类型：1 或 -1
默认值：1
hAxis.format

数字或日期轴标签的格式字符串。

对于数字轴标签，这是十进制格式 ICU 模式集 的一个子集。例如，{format:'#,###%'} 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任一项：

  • {format: 'none'}：显示不带格式的数字（例如，8000000）
  • {format: 'decimal'}：显示带千位分隔符的数字（例如，8,000,000）
  • {format: 'scientific'}：以科学计数法显示数字（例如，8e6）
  • {format: 'currency'}：以本地货币显示数字（例如，$8,000,000.00）
  • {format: 'percent'}：以百分比的形式显示数字（例如，800,000,000%）
  • {format: 'short'}：显示缩写数字（例如，800 万）
  • {format: 'long'}：将数字显示为完整字词（例如，800 万）

对于日期轴标签，这是日期格式 ICU 模式集 的一部分。例如，{format:'MMM d, y'} 将显示 2011 年 7 月 1 日的日期值“7 月 1 日”，

应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情，请参阅 加载具有特定语言区域的图表 。

在计算刻度线值和网格线时，系统会考虑所有相关网格线选项的几个备选组合，如果格式化的刻度线标签重复或重叠，则将拒绝备选组合。因此，如果您只想显示整数刻度线值，则可以指定 format:"#"，但请注意，如果没有满足此条件的备用内容，则不会显示网格线或刻度线。

只有 continuous 轴支持此选项。

类型：字符串
默认：auto
hAxis.gridlines

一个对象，包含用于配置横轴上的网格线的属性。 请注意，横轴网格线是垂直绘制的。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{color: '#333', minSpacing: 20}

只有 continuous 轴支持此选项。

类型：object
默认值：null
hAxis.gridlines.color

图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。

类型：字符串
默认：“#CCC”
hAxis.gridlines.count

图表区域内水平网格线的大致数量。 如果您为 gridlines.count 指定一个正数，它将用于计算网格线之间的 minSpacing。 您可以指定值 1 表示仅绘制一条网格线，指定 0 则不绘制网格线。 指定 -1（默认值），即可根据其他选项自动计算网格线的数量。

类型：数字
默认值：-1
hAxis.gridlines.interval

相邻网格线之间的大小数组（以数据值形式，而不是像素）。此选项目前仅适用于数字轴，但与仅用于日期和时间的 gridlines.units.<unit>.interval 选项类似。 对于线性刻度，默认值为 [1, 2, 2.5, 5]，表示网格线的值可以是每个单位 (1)、偶数单位 (2)，也可以是 2.5 或 5 的倍数。 也可以使用这些值的 10 倍乘方运算（例如 [10, 20, 25, 50] 和 [.1, .2, .25, .5]）。 对于对数刻度，默认值为 [1, 2, 5]。

类型：介于 1 到 10 之间的数字（不包括 10）。
默认值：计算
hAxis.gridlines.minSpacing

hA 轴主网格线之间的最小屏幕空间（以像素为单位）。 主要网格线的默认值是 40（线性刻度）和 20（对数刻度）。如果您指定 count 而不是 minSpacing，则 minSpacing 会根据计数计算得出。 相反，如果您指定 minSpacing 而不是 count，则计数通过 minSpacing 计算得出。如果您同时指定两者，则 minSpacing 会替换。

类型：数字
默认值：计算
hAxis.gridlines.multiple

所有网格线和刻度线值都必须是此选项值的倍数。请注意，与间隔不同，不考虑倍数的 10 倍幂。 因此，您可以通过指定 gridlines.multiple = 1 将 tick 强制为整数，或通过指定 gridlines.multiple = 1000 强制 tick 为 1000 的倍数。

类型：数字
默认值：1
hAxis.gridlines.units

当与图表计算的网格线搭配使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

如需了解详情，请参阅日期和时间。

类型：object
默认值：null
hAxis.minorGridlines

一个对象，其中包含用于在水平轴上配置次要网格线的成员，类似于 hAxis.gridlines 选项。

只有 continuous 轴支持此选项。

类型：object
默认值：null
hAxis.minorGridlines.color

图表区域内水平次要网格线的颜色。请指定有效的 HTML 颜色字符串。

类型：字符串
默认：网格线和背景颜色的混合
hAxis.minorGridlines.count

除了通过将计数设置为 0 来停用次要网格线之外，minorGridlines.count 选项大多已废弃。次要网格线的数量现在完全取决于主要网格线之间的间距（请参阅 hAxis.gridlines.interval）和最小所需空间（请参阅 hAxis.minorGridlines.minSpacing）。

类型：数字
默认值：1
hAxis.minorGridlines.interval

smallGridlines.interval 选项与主网格线间隔选项类似，但所选间隔将始终是主网格间隔的偶除数。 线性刻度的默认间隔为 [1, 1.5, 2, 2.5, 5]，对数刻度的默认间隔为 [1, 2, 5]。

类型：数字
默认值：1
hAxis.minorGridlines.minSpacing

相邻的次要网格线之间以及次要网格线和主要网格线之间所需的最小空间（以像素为单位）。线性刻度的默认值为主网格线的 minSpacing 的 1/2，对数刻度的 minSpacing 为 1/5。

类型：数字
默认值：computed
hAxis.minorGridlines.multiple

与主要 gridlines.multiple 相同。

类型：数字
默认值：1
hAxis.minorGridlines.units

当与图表计算的 MinorGridlines 一起使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

如需了解详情，请参阅日期和时间。

类型：object
默认值：null
hAxis.logScale

hAxis 属性，将横轴设为对数刻度（要求所有值均为正数）。如果设为 true，则表示是的。

只有 continuous 轴支持此选项。

类型：布尔值
默认值：false
hAxis.scaleType

hAxis 属性，将横轴设为对数刻度。可以是：

  • null - 不执行对数缩放。
  • “log”- 对数缩放。不绘制负值和零值。此选项与设置 hAxis: { logscale: true } 相同。
  • “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。

只有 continuous 轴支持此选项。

类型：字符串
默认值：null
hAxis.textPosition

横轴文本相对于图表区域的位置。支持的值：“out”“in”“none”。

类型：字符串
默认值：“out”
hAxis.textStyle

一个对象，用于指定横轴文本样式。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

将自动生成的 X 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值（例如数字、日期、日期时间或时间）或对象。如果是对象，则应具有用于 tick 值的 v 属性，以及包含要显示为标签的文字字符串的可选 f 属性。

除非您指定要替换的 viewWindow.min 或 viewWindow.max，否则 viewWindow 将自动展开即可包括最小和最大 tick。

示例：

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

只有 continuous 轴支持此选项。

类型：元素数组
默认：auto
hAxis.title

hAxis 属性，用于指定横轴的标题。

类型：字符串
默认值：null
hAxis.titleTextStyle

一个对象，用于指定横轴标题文本样式。该对象的格式如下： 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

如果为 false，将隐藏最外层的标签，而不是允许图表容器剪裁它们。如果为 true，将允许剪裁标签。

只有 discrete 轴支持此选项。

类型：布尔值
默认值：false
hAxis.slantedText

如果为 true，请以某个角度绘制横轴文本，以帮助沿着轴显示更多文本；如果为 false，则垂直绘制横轴文本。默认行为是倾斜文本（如果在竖直绘制时无法完全填满文本）。请注意，仅当 hAxis.textPosition 设置为“out”（默认值）时，此选项才可用。 日期和时间的默认值为 false。

类型：布尔值
默认：自动
hAxis.slantedTextAngle

横轴文本的角度（如果文本为倾斜绘制）。如果 hAxis.slantedText 为 false 或处于自动模式，而图表决定水平绘制文本，则忽略。如果角度为正，则逆时针旋转；如果角度为正，则逆时针旋转；如果角度为正，则顺时针旋转。

类型：数字、-90—90
默认值：30
hAxis.maxAlternation

横轴文本的级别数上限。如果轴的文本标签变得太拥挤，服务器可能会上下移动相邻标签，以使标签更靠近。此值可指定最多使用的楼层数；如果标签可以放得不重叠，服务器可以使用较少的楼层。对于日期和时间，默认值为 1。

类型：数字
默认值：2
hAxis.maxTextLines

文本标签允许的行数上限。如果标签太长，标签可以跨多行，并且行数默认受可用空间高度的限制。

类型：数字
默认：auto
hAxis.minTextSpacing

两个相邻文本标签之间的最小水平间距（以像素为单位）。如果标签的间距过密或过长，则间距可能会降至此阈值以下，在这种情况下，系统将采用一种标签整洁措施（例如，截断标签或丢弃部分标签）。

类型：数字
默认值：hAxis.textStyle.fontSize 的值
hAxis.showTextEvery

要显示的横轴标签数量，其中 1 表示显示每个标签，2 表示显示其他所有标签，以此类推。默认设置为尝试显示尽可能多的标签，而不重叠。

类型：数字
默认：自动
hAxis.maxValue

将横轴的最大值移至指定值；在大多数图表中，此值为向右移动。如果设置的值小于数据最大 x 值，则忽略。 hAxis.viewWindow.max 会替换此属性。

只有 continuous 轴支持此选项。

类型：数字
默认：自动
hAxis.minValue

将横轴的最小值移到指定值；在大多数图表中，该值将位于左侧。如果设为大于数据最小 x 值的值，则忽略。 hAxis.viewWindow.min 会替换此属性。

只有 continuous 轴支持此选项。

类型：数字
默认：自动
hAxis.viewWindowMode

指定如何缩放横轴以在图表区域内渲染值。支持以下字符串值：

  • 'pretty' - 缩放水平值，使最大和最小数据值稍微位于图表区域的左侧和右侧。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。
  • 'maximized' - 缩放水平值，使最大和最小数据值接触图表区域的左侧和右侧。这会导致 haxis.viewWindow.min 和 haxis.viewWindow.max 被忽略。
  • “露骨内容”- 用于指定图表区域左侧和右侧缩放比例值的已弃用选项。（已弃用，因为它与 haxis.viewWindow.min 和 haxis.viewWindow.max 重复）。系统将剪裁超出这些值的数据值。您必须指定一个 hAxis.viewWindow 对象，用于描述要显示的最大值和最小值。

只有 continuous 轴支持此选项。

类型：字符串
默认值：相当于“pretty”，但如果使用，则 haxis.viewWindow.min 和 haxis.viewWindow.max 优先。
hAxis.viewWindow

指定横轴的剪裁范围。

类型：object
默认值：null
hAxis.viewWindow.max

  • 对于 continuous 轴：

    要渲染的最大水平数据值。

  • 对于 discrete 轴：

    剪裁窗口结束位置的行索引（从零开始）。此索引及更高索引处的数据点将被剪裁掉。与 vAxis.viewWindowMode.min 结合使用时，它可以定义半开范围 [min, max)，用于表示要显示的元素索引。 换句话说，系统会显示 min <= index < max 的所有索引。

当 hAxis.viewWindowMode 为“pretty”或“maximized”时，会被忽略。

类型：数字
默认：auto
hAxis.viewWindow.min

  • 对于 continuous 轴：

    要渲染的最小水平数据值。

  • 对于 discrete 轴：

    从零开始的行索引，剪裁窗口开始的位置。索引值低于此值的数据点将被剪裁掉。与 vAxis.viewWindowMode.max 结合使用时，它可以定义半开范围 [min, max)，用于表示要显示的元素索引。换句话说，系统会显示 min <= index < max 的每个索引。

当 hAxis.viewWindowMode 为“pretty”或“maximized”时，会被忽略。

类型：数字
默认：auto
高度

图表的高度（以像素为单位）。

类型：数字
默认值：所包含元素的高度
isStacked

如果设置为 true，则在每个域值处堆叠所有系列的元素。 注意：在列、面积和 SteppedArea 图表中，Google 图表会颠倒图例项的顺序，以便更好地与系列元素的堆叠对应（例如，系列 0 将是最底部的图例项）。此 不适用于 条形图。

isStacked 选项还支持 100% 堆叠，即每个域值处的元素堆栈都会重新缩放，加起来为 100%。

isStacked 的选项包括：

  • false - 元素不会堆叠。这是默认选项。
  • true - 堆叠每个域值处所有系列的元素。
  • 'percent' - 堆叠每个域值处所有系列的元素，并重新缩放它们，使它们相加为 100%，其中每个元素的值都按 100% 的百分比计算。
  • 'relative' - 堆叠每个域值处所有系列的元素，并重新缩放它们，使它们相加为 1，每个元素的值按 1 的分数计算。
  • 'absolute' - 功能与 isStacked: true 相同。

对于 100% 堆叠，为每个元素计算出的值将显示在提示中实际值之后。

目标轴默认基于相对的 0-1 刻度刻度值，'relative' 为 1 的小数部分，'percent' 为 0-100% 的刻度值（注意：使用 'percent' 选项时，轴/刻度点值显示为百分比，但实际值是相对 0-1 的刻度值。 这是因为百分比轴刻度是将“#.##%”格式应用于相对 0-1 刻度值的结果。使用 isStacked: 'percent' 时，请务必使用相对的 0-1 缩放值指定任何刻度线/网格线。您可以使用适当的 hAxis/vAxis 选项自定义网格线/刻度线值和格式。

100% 堆叠仅支持 number 类型的数据值，并且基准必须为 0。

类型：布尔值/字符串
默认值：false
传奇

包含成员的对象，用于配置图例的各个方面。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
类型：object
默认值：null
legend.pageIndex

图例最初选择的从零开始的页面索引。

类型：数字
默认值：0
legend.position

图例的位置。可以是下列选项之一：

  • 'bottom' - 图表下方。
  • “left”- 位于图表左侧，前提是左轴没有与之关联的数据系列。 因此，如果您希望显示左侧的图例，请使用 targetAxisIndex: 1 选项。
  • “in”- 在图表内，左上角。
  • “none”- 不显示图例。
  • “right”- 位于图表右侧。与 vAxes 选项不兼容。
  • “top”- 图表上方。
类型：字符串
默认：“right”
legend.alignment

图例的对齐方式。可以是下列选项之一：

  • “start”- 与分配至图例的区域起点对齐。
  • “center”- 在为图例分配的区域中居中。
  • 'end' - 与分配至图例的区域末端对齐。

起点、中心和终点是相对于图例的样式（垂直或水平）而言的。 例如，在“右侧”图例中，“start”和“end”分别位于顶部和底部；对于“顶部”图例，“start”和“end”分别位于区域的左侧和右侧。

默认值取决于图例的位置。对于“底部”图例，默认值为“center”；其他图例默认为“start”。

类型：字符串
默认：自动
legend.textStyle

用于指定图例文本样式的对象。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
屏幕方向

图表的方向。设置为 'vertical' 时，旋转图表的轴，以便（例如）柱形图成为条形图，并且面积图向右而非向上扩展：

类型：字符串
默认：'水平'
reverseCategories

如果设为 true，系统将从右向左绘制系列。默认从左到右绘制。

只有 discrete major 轴支持此选项。

类型：布尔值
默认值：false
系列图书

一个对象数组，其中每个对象都描述了图表中相应系列的格式。要为系列使用默认值，请指定空对象 {}。如果未指定系列或值，系统将使用全局值。每个对象都支持以下属性：

  • annotations - 要应用于此系列图书注解的对象。例如，这可用于控制系列的 textStyle： 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    有关可自定义内容的更完整列表，请参阅各种 annotations 选项。

  • color - 要用于此系列的颜色。请指定有效的 HTML 颜色字符串。
  • targetAxisIndex - 要为此系列指定哪条轴，0 是默认轴，1 是相反轴。默认值为 0；设置为 1 可定义一个图表，其中不同的数据系列针对不同的轴进行渲染。至少有一个系列大量分配给默认轴。您可以为不同的轴定义不同的刻度。
  • visibleInLegend - 一个布尔值，其中 true 表示系列中应包含图例条目，false 表示不应包含图例条目。默认值为 true。

您可以指定对象数组，其中每个对象都会按给定顺序应用于系列；也可以指定一个对象，其中每个子对象都有一个数字键，用于指示该对象所适用的系列。例如，以下两项声明完全相同，将第一个数据系列声明为黑色且未显示在图例中，而将第四个数据系列声明为红色数据并不存在于图例中： 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
类型：对象数组或包含嵌套对象的对象
默认值：
主题

主题是一组预定义的选项值，这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用：

  • 'maximized' - 最大化图表区域，并在图表区域内绘制图例和所有标签。设置以下选项： 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
类型：字符串
默认值：null
标题

要在图表上方显示的文本。

类型：字符串
默认：无标题
titlePosition

图表标题的放置位置（相对于图表区域）。支持的值：

  • in - 在图表区域内绘制标题。
  • out - 在图表区域以外绘制标题。
  • 无 - 省略标题。
类型：字符串
默认值：“out”
titleTextStyle

一个对象，用于指定标题文本样式。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
提示

包含用于配置各种提示元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{textStyle: {color: '#FF0000'}, showColorCode: true}
类型：object
默认值：null
tooltip.ignoreBounds

如果设置为 true，则允许绘制提示在所有边超出图表边界。

注意：这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能，图表边界以外的任何溢出都将被剪裁。如需了解详情，请参阅自定义提示内容。

类型：布尔值
默认值：false
tooltip.isHtml

如果此政策设为 true，系统会使用 HTML 渲染（而非 SVG 渲染）提示。如需了解详情，请参阅自定义提示内容。

注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。

类型：布尔值
默认值：false
tooltip.showColorCode

如果为 true，则在提示中的系列信息旁边显示彩色方块。当 focusTarget 设置为“category”时，默认值为 true，否则默认值为 false。

类型：布尔值
默认：自动
tooltip.textStyle

一个用于指定提示文本样式的对象。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

导致显示提示的用户互动：

  • “focus”- 用户将鼠标悬停在元素上时将显示提示。
  • “none”- 不会显示提示。
  • “selection”- 当用户选择元素时，系统将显示提示。
类型：字符串
默认：“focus”
趋势线

在支持 趋势线 的图表上显示这些趋势线。默认使用线性趋势线，但您可以使用 trendlines.n.type 选项自定义趋势线。

趋势线是按系列指定的，因此大多数情况下，您的选项将如下所示： 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
类型：object
默认值：null
trendlines.n.color

趋势线 的颜色，以英文颜色名称或十六进制字符串表示。

类型：字符串
默认：默认系列图书颜色
trendlines.n.degree

对于 type: 'polynomial' 的 趋势线 ，多项式的次数（2 表示二次，3 表示立方，依此类推）。（在即将发布的 Google 图表版本中，默认学位可能从 3 度变为 2 度。）

类型：数字
默认值：3
trendlines.n.labelInLegend

设置后， 趋势线 将以此字符串的形式显示在图例中。

类型：字符串
默认值：null
trendlines.n.lineWidth

趋势线 的线宽（以像素为单位）。

类型：数字
默认值：2
trendlines.n.opacity

趋势线 的透明度，介于 0.0（透明）到 1.0（不透明）。

类型：数字
默认值：1.0
trendlines.n.pointSize

趋势线 通过在图表上标注一组点来绘制；这个很少用到的选项可让您自定义点的大小。通常最好使用趋势线的 lineWidth 选项。不过，如果您使用的是全局 pointSize 选项，并想为趋势线使用不同的数据点大小，那么就需要此选项。

类型：数字
默认值：1
trendlines.n.pointsVisible

趋势线 是通过在图表上标注若干点来绘制的。趋势线的 pointsVisible 选项决定了特定趋势线的点是否可见。

类型：布尔值
默认值：true
trendlines.n.showR2

是否在图例或趋势线提示中显示 决定系数 。

类型：布尔值
默认值：false
trendlines.n.type

趋势线 是 'linear'（默认）、'exponential' 还是 'polynomial'。

类型：字符串
默认：线性
trendlines.n.visibleInLegend

趋势线 等式是否显示在图例中。（显示在趋势线提示中。）

类型：布尔值
默认值：false
vAxes

如果图表包含多个纵轴，则指定各个纵轴的属性。 每个子对象都是一个 vAxis 对象，可以包含 vAxis 支持的所有属性。这些属性值会替换同一媒体资源的任何全局设置。

如需指定具有多个纵轴的图表，请先使用 series.targetAxisIndex 定义新轴，然后使用 vAxes 配置轴。以下示例将系列 2 分配给右轴，并为其指定了自定义标题和文本样式： 

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

此属性可以是对象或数组：对象是对象的集合，每个对象都带有一个数字标签，用于指定其定义的轴 - 如上所示的格式；数组是对象数组，每个轴一个。例如，以下数组样式的表示法与上面显示的 vAxis 对象完全相同： 

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
类型：对象数组或包含子对象的对象
默认值：null
vAxis

包含用于配置各种纵轴元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
类型：object
默认值：null
vAxis.baseline

vAxis 属性，用于指定纵轴的基准。如果基线大于最高网格线或小于最低网格线，则基线将四舍五入为最近的网格线。

类型：数字
默认：自动
vAxis.baselineColor

指定纵轴基线的颜色。可以是任何 HTML 颜色字符串，例如：'red' 或 '#00cc00'。

类型：数字
默认：“black”
vAxis.direction

值沿纵轴的增长方向。默认情况下，图表底部会显示较小的值。指定 -1 会反转值的顺序。

类型：1 或 -1
默认值：1
vAxis.format

数字轴标签的格式字符串。这是 ICU 模式集 的一部分。 例如，{format:'#,###%'} 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任一项：

  • {format: 'none'}：显示不带格式的数字（例如，8000000）
  • {format: 'decimal'}：显示带千位分隔符的数字（例如，8,000,000）
  • {format: 'scientific'}：以科学计数法显示数字（例如，8e6）
  • {format: 'currency'}：以本地货币显示数字（例如，$8,000,000.00）
  • {format: 'percent'}：以百分比的形式显示数字（例如，800,000,000%）
  • {format: 'short'}：显示缩写数字（例如，800 万）
  • {format: 'long'}：将数字显示为完整字词（例如，800 万）

应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情，请参阅 加载具有特定语言区域的图表 。

在计算刻度线值和网格线时，系统会考虑所有相关网格线选项的几个备选组合，如果格式化的刻度线标签重复或重叠，则将拒绝备选组合。因此，如果您只想显示整数刻度线值，则可以指定 format:"#"，但请注意，如果没有满足此条件的备用内容，则不会显示网格线或刻度线。

类型：字符串
默认：auto
vAxis.gridlines

一个对象，其中包含用于在纵轴上配置网格线的成员。 请注意，纵轴网格线是水平绘制的。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{color: '#333', minSpacing: 20}
类型：object
默认值：null
vAxis.gridlines.color

图表区域内垂直网格线的颜色。请指定有效的 HTML 颜色字符串。

类型：字符串
默认：“#CCC”
vAxis.gridlines.count

图表区域内水平网格线的大致数量。 如果您为 gridlines.count 指定一个正数，它将用于计算网格线之间的 minSpacing。 您可以指定值 1 表示仅绘制一条网格线，指定 0 则不绘制网格线。 指定 -1（默认值），即可根据其他选项自动计算网格线的数量。

类型：数字
默认值：-1
vAxis.gridlines.interval

相邻网格线之间的大小数组（以数据值形式，而不是像素）。此选项目前仅适用于数字轴，但与仅用于日期和时间的 gridlines.units.<unit>.interval 选项类似。 对于线性刻度，默认值为 [1, 2, 2.5, 5]，表示网格线的值可以是每个单位 (1)、偶数单位 (2)，也可以是 2.5 或 5 的倍数。 也可以使用这些值的 10 倍乘方运算（例如 [10, 20, 25, 50] 和 [.1, .2, .25, .5]）。 对于对数刻度，默认值为 [1, 2, 5]。

类型：介于 1 到 10 之间的数字（不包括 10）。
默认值：计算
vAxis.gridlines.minSpacing

hA 轴主网格线之间的最小屏幕空间（以像素为单位）。 主要网格线的默认值是 40（线性刻度）和 20（对数刻度）。如果您指定 count 而不是 minSpacing，则 minSpacing 会根据计数计算得出。 相反，如果您指定 minSpacing 而不是 count，则计数通过 minSpacing 计算得出。如果您同时指定两者，则 minSpacing 会替换。

类型：数字
默认值：计算
vAxis.gridlines.multiple

所有网格线和刻度线值都必须是此选项值的倍数。请注意，与间隔不同，不考虑倍数的 10 倍幂。 因此，您可以通过指定 gridlines.multiple = 1 将 tick 强制为整数，或通过指定 gridlines.multiple = 1000 强制 tick 为 1000 的倍数。

类型：数字
默认值：1
vAxis.gridlines.units

当与图表计算的网格线搭配使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

如需了解详情，请参阅日期和时间。

类型：object
默认值：null
vAxis.minorGridlines

一个对象，其中包含用于在纵轴上配置次要网格线的成员，类似于 vAxis.gridlines 选项。

类型：object
默认值：null
vAxis.minorGridlines.color

图表区域内垂直次网格线的颜色。请指定有效的 HTML 颜色字符串。

类型：字符串
默认：网格线和背景颜色的混合
vAxis.minorGridlines.count

除通过将计数设置为 0 来停用次要网格线外，MinorGridlines.count 选项大体上已废弃。次网格线的数量取决于主要网格线的间距（请参阅 vAxis.gridlines.interval）和所需的最小空间（请参阅 vAxis.minorGridlines.minSpacing）。

类型：数字
默认值：1
vAxis.minorGridlines.interval

smallGridlines.interval 选项与主网格线间隔选项类似，但所选间隔将始终是主网格间隔的偶除数。 线性刻度的默认间隔为 [1, 1.5, 2, 2.5, 5]，对数刻度的默认间隔为 [1, 2, 5]。

类型：数字
默认值：1
vAxis.minorGridlines.minSpacing

相邻的次要网格线之间以及次要网格线和主要网格线之间所需的最小空间（以像素为单位）。线性刻度的默认值为主网格线的 minSpacing 的 1/2，对数刻度的 minSpacing 为 1/5。

类型：数字
默认值：computed
vAxis.minorGridlines.multiple

与主要 gridlines.multiple 相同。

类型：数字
默认值：1
vAxis.minorGridlines.units

当与图表计算的 MinorGridlines 一起使用时，替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

如需了解详情，请参阅日期和时间。

类型：object
默认值：null
vAxis.logScale

如果为 true，则使纵轴以对数刻度表示。注意：所有值必须为正数。

类型：布尔值
默认值：false
vAxis.scaleType

vAxis 属性，将纵轴设为对数刻度。可以是：

  • null - 不执行对数缩放。
  • “log”- 对数缩放。不绘制负值和零值。此选项与设置 vAxis: { logscale: true } 相同。
  • “MirrorLog”- 对数缩放，其中绘制负值和零值。绘制的负数值是绝对值的对数的负数。接近 0 的值按线性刻度绘制。

只有 continuous 轴支持此选项。

类型：字符串
默认值：null
vAxis.textPosition

纵轴文本相对于图表区域的位置。支持的值：“out”“in”“none”。

类型：字符串
默认值：“out”
vAxis.textStyle

用于指定纵轴文本样式的对象。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

将自动生成的 Y 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值（例如数字、日期、日期时间或时间）或对象。如果是对象，则应具有用于 tick 值的 v 属性，以及包含要显示为标签的文字字符串的可选 f 属性。

除非您指定要替换的 viewWindow.min 或 viewWindow.max，否则 viewWindow 将自动展开即可包括最小和最大 tick。

示例：

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
类型：元素数组
默认：auto
vAxis.title

vAxis 属性，用于指定纵轴的标题。

类型：字符串
默认：无标题
vAxis.titleTextStyle

一个对象，用于指定纵轴标题文本样式。该对象的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

将纵轴的最大值移动到指定值；在大多数图表中这个值都将向上移动。如果设置的值小于数据的最大 y 值，则忽略。 vAxis.viewWindow.max 会替换此属性。

类型：数字
默认：自动
vAxis.minValue

将纵轴的最小值移到指定值；在大多数图表中，该值将是向下的。如果设为大于数据最小 y 值的值，则忽略。 vAxis.viewWindow.min 会替换此属性。

类型：数字
默认值：null
vAxis.viewWindowMode

指定如何缩放纵轴以在图表区域内渲染值。支持以下字符串值：

  • 'pretty' - 缩放垂直值，使最大和最小数据值稍微位于图表区域的底部和顶部。 viewWindow 会展开为最近的主网格线（对于数字）或最近的次要网格线（对于日期和时间）。
  • 'maximized' - 缩放垂直值，使最大和最小数据值接触图表区域的顶部和底部。这会导致 vaxis.viewWindow.min 和 vaxis.viewWindow.max 被忽略。
  • “露骨内容”- 用于指定图表区域的顶部和底部刻度值的已弃用选项。（已弃用，因为它与 vaxis.viewWindow.min 和 vaxis.viewWindow.max 重复。系统会剪裁超出这些值的数据值。您必须指定一个 vAxis.viewWindow 对象，用于描述要显示的最大值和最小值。
类型：字符串
默认值：相当于“pretty”，但如果使用，则 vaxis.viewWindow.min 和 vaxis.viewWindow.max 优先。
vAxis.viewWindow

指定纵轴的剪裁范围。

类型：object
默认值：null
vAxis.viewWindow.max

要呈现的最大行业数据值。

当 vAxis.viewWindowMode 为“pretty”或“maximized”时，会被忽略。

类型：数字
默认：auto
vAxis.viewWindow.min

要渲染的最小行业数据值。

当 vAxis.viewWindowMode 为“pretty”或“maximized”时，会被忽略。

类型：数字
默认：auto
宽度

图表的宽度，以像素为单位。

类型：数字
默认值：所包含元素的宽度

方法

方法
draw(data, options)

绘制图表。只有在 ready 事件触发后，图表才会接受进一步的方法调用。Extended description。

Return Type（返回类型）：none
getAction(actionID)

返回具有所请求的 actionID 的提示操作对象。

返回类型：object
getBoundingBox(id)

返回一个对象，其中包含图表元素 id 的左侧、顶部、宽度和高度。尚未记录 id 的格式（它们是事件处理脚本的返回值），以下是一些示例：

var cli = chart.getChartLayoutInterface();

图表区域的高度
cli.getBoundingBox('chartarea').height
条形图或柱形图第一个系列中第三条柱的宽度
cli.getBoundingBox('bar#0#2').width
饼图第五个楔形的边界框
cli.getBoundingBox('slice#4')
垂直（如柱形）图表的图表数据的边界框：
cli.getBoundingBox('vAxis#0#gridline')
水平（例如条形图）图表数据的边界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getChartAreaBoundingBox()

返回一个对象，其中包含图表内容的左侧、顶部、宽度和高度（即不包括标签和图例）：

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getChartLayoutInterface()

返回一个对象，其中包含有关图表在屏幕上的位置及其元素的信息。

可以对返回的对象调用以下方法：

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

在绘制图表之后调用此方法。

返回类型：object
getHAxisValue(xPosition, optional_axis_index)

返回 xPosition 处的水平数据值，这是相对于图表容器左边缘的像素偏移量。可以是负数。

示例：chart.getChartLayoutInterface().getHAxisValue(400)。

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getImageURI()

返回已序列化为图片 URI 的图表。

在绘制图表之后调用此方法。

请参阅打印 PNG 图表。

返回类型：字符串
getSelection()

返回所选图表实体的数组。 可选的实体包括条形、图例条目和类别。 条形对应于数据表中的单元格、列对应于列的图例条目（行索引为 null），以及类别对应于行（列索引为 null）。 对于此图表，在任何给定时刻，只能选择一个实体。 Extended description 。

返回类型：选择元素数组
getVAxisValue(yPosition, optional_axis_index)

返回 yPosition 处的垂直数据值，该值是从图表容器上边缘向下偏移的像素值。可以是负数。

示例：chart.getChartLayoutInterface().getVAxisValue(300)。

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getXLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器左边缘的像素 x 坐标。

示例：chart.getChartLayoutInterface().getXLocation(400)。

在绘制图表之后调用此方法。

Return Type（返回类型）：number
getYLocation(dataValue, optional_axis_index)

返回 dataValue 相对于图表容器上边缘的像素 y 坐标。

示例：chart.getChartLayoutInterface().getYLocation(300)。

在绘制图表之后调用此方法。

Return Type（返回类型）：number
removeAction(actionID)

从图表中移除包含所请求 actionID 的提示操作。

返回值类型：none
setAction(action)

设置当用户点击操作文本时要执行的提示操作。

setAction 方法接受一个对象作为其操作参数。此对象应指定 3 个属性：id（所设置的操作的 ID）、text（应显示在操作提示中的文本）和 action（应在用户点击操作文本时应运行的函数）。

任何和所有提示操作都应在调用图表的 draw() 方法之前设置。详细描述。

返回值类型：none
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选的实体包括条形、图例条目和类别。 条形对应于数据表中的单元格、列对应于列的图例条目（行索引为 null），以及类别对应于行（列索引为 null）。 对于此图表，一次只能选择一个实体。 Extended description 。

Return Type（返回类型）：none
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

如需详细了解如何使用这些事件，请参阅基本互动、处理事件和触发事件。

名称
animationfinish

过渡动画完整播放时触发。

属性：无
click

当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。

属性：targetID
error

尝试渲染图表时出错时触发。

属性：id、message
legendpagination

当用户点击图例分页箭头时触发。传回当前图例（从 0 开始）的网页索引和总页数。

属性：currentPageIndex、totalPages
onmouseover

用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。

属性：行、列
onmouseout

用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。

属性：行、列
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
select

当用户点击视觉实体时触发。如需了解已选择的内容，请调用 getSelection()。

属性：无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。