条形图

概览

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

示例

彩条

我们用图表绘制四种贵金属的密度:

在上方,所有颜色都是默认蓝色。这是因为它们都是同一系列的一部分;如果有第二个系列,则应该以红色显示。我们可以使用 style 角色自定义以下颜色:

有三种不同的颜色选择方式,而我们的数据表展示了所有这三种方式: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,以显示网格线。在第四个栏中,使用了三个样式属性:stroke-colorstroke-width 用于绘制边框,fill-color 用于指定内部矩形的颜色。此外,最右侧的条形还使用 stroke-opacityfill-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">
    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.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

如果想要以不同的格式设置值的格式,我们可以定义格式设置工具,并使用如下函数进行封装:

      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},
          hAxis: {minValue: 0}
        };
    
100% 堆叠
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

创建 Material 条形图

2014 年,Google 宣布了相关准则,旨在支持在 Google 平台上运行的各种产品和服务(例如 Android 应用)的通用外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本;如果您愿意,欢迎使用它们。

创建 Material 条形图与创建现在所谓的“传统”条形图类似。加载 Google 可视化 API(但使用 'bar' 软件包,而不是 'corechart' 软件包),定义数据表,然后创建对象(但需要创建类 google.charts.Bar,而不是 google.visualization.BarChart)。

注意:在旧版 Internet Explorer 中,Material 图表将不起作用。(IE8 及更早版本不支持 SVG,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',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; 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 预设选项。

双 X 图

注意:双 X 轴仅适用于 Material 图表(即软件包 bar 的图表)。

有时,您需要在条形图中显示两个数据系列,其中包含两个独立的 x 轴:一个数据系列的上轴,另一个数据系列的下轴:

请注意,我们的两个 x 轴不仅具有不同的解析度(“parsecs”与“apparent magnitude”),还有各自独立的缩放和网格线。如果要自定义此行为,请使用 hAxis.gridlines 选项。

在下面的代码中,axesseries 选项共同指定了图表的双重外观。series 选项用于指定要为每个轴使用的轴('distance''brightness';它们不需要与数据表中的列名称有任何关系)。然后,axes 选项会使此图表变为双 X 轴图表,将 'apparent magnitude' 轴放在顶部,'parsecs' 轴放在底部。

<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([
          ['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 options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

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

热门 X 图

注意:顶部 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([
          ['Opening 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 = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

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

正在加载

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

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.BarChart(container);

对于 Material 条形图,google.charts.load 软件包名称为 "bar"。可视化图表的类名称为 google.charts.Bar

  google.charts.load("current", {packages: ["bar"]});
  var chart = new google.charts.Bar(container);

数据格式

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

  第 0 列 第 1 列 …… N
目的:
  • Y 轴组标签(离散)
  • Y 轴值(连续
该组中条形图 1 的值 …… 此群组中的条形 N
数据类型:
  • 字符串(离散)
  • 数字、日期、日期时间或
    时间(连续)
number …… number
角色: 数据 …… 数据
可选列角色 ……

 

配置选项

名称
动画时长

动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档

类型:数字
默认:0
动画缓和

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

  • “linear”- 恒速。
  • “in”- 缓入 - 开始时缓慢,然后加速。
  • “out”- 缓出 - 快速启动并放慢速度。
  • “inAndOut”- 缓入和缓出 - 缓慢起步,加速,然后减速。
类型:字符串
默认:“linear”
动画启动

确定图表是否在初始绘制时呈现动画效果。如果为 true,则图表将从基线开始,并以动画形式呈现为最终状态。

类型:布尔值
默认 false
外部注释

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

类型:布尔值
默认:false
注解.datum
对于支持注释的图表,您可以通过 annotations.datum 对象替换为各个数据元素提供的注释(例如,条形图上与每个条形一起显示的值)对于 Google 图表的选择。您可以使用 annotations.datum.stem.color 控制颜色,使用 annotations.datum.stem.length 控制树干长度,并使用 annotations.datum.style 控制样式。
Type:对象
默认:颜色为“黑色”;长度为 12;样式为“点”。
注释网域
对于支持注释的图表,您可以通过 annotations.domain 对象替换您为网域提供的注释的图表(图表的长轴,例如典型折线图上的 X 轴)。您可以使用 annotations.domain.stem.color 控制颜色,使用 annotations.domain.stem.length 控制树干长度,并使用 annotations.domain.style 控制样式。
Type:对象
默认:颜色为“黑色”;长度为 5;样式为“点”。
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
      }
    }
  }
};
    

目前,面积图、条形图、柱形图、组合图、折线图和散点图均支持此选项。注解图表不支持该注解。

Type:对象
默认:null
高注释
对于支持注释的图表,您可以使用 annotations.highContrast 布尔值替换 Google 图表选择的注释颜色。默认情况下,annotations.highContrast 为 true,这会导致图表选择对比鲜明的注解颜色:深色背景上使用浅色,浅色时采用深色。如果您将 annotations.highContrast 设置为 false 并且未指定自己的注解颜色,则 Google 图表将对注解使用默认系列颜色:
类型:布尔值
默认:true
注解.stem
对于支持注解的图表,annotations.stem 对象可让您替换 Google 图表针对主干样式的选择。您可以使用 annotations.stem.color 控制颜色,并使用 annotations.stem.length 来控制树干长度。请注意,词干长度选项对样式为 'line' 的注解没有影响:对于 'line' 基准注解,词干长度始终与文本相同,而对于 'line' 网域注解,词干长度扩展为整个图表。
Type:对象
默认:颜色为“黑色”;网域注释的长度为 5,基准注释的长度为 12。
注解样式
对于支持注释的图表,您可以使用 annotations.style 选项替换 Google 图表对注释类型的选择。可为 'line''point'
类型:字符串
默认:“point”
注释文本样式
对于支持注释的图表,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
    }
  }
};
    

目前,面积图、条形图、柱形图、组合图、折线图和散点图均支持此选项。 注解图表不支持该注解。

Type:对象
默认:null
axisTitlesPosition

与图表区域相比,轴标题的放置位置。支持的值:

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

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

类型:字符串或对象
默认:“白色”
backgroundColor.stroke 中

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

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

边框宽度(以像素为单位)。

类型:数字
默认:0
backgroundColor.fill

图表的填充颜色,表示为 HTML 颜色字符串。

类型:字符串
默认:“白色”
bar.groupWidth
一组条形的宽度,以以下任一格式指定:
  • 像素(例如 50)。
  • 各组可用宽度的百分比(例如“20%”),其中“100%”表示各组之间没有空格。
类型:数字或字符串
默认黄金比例,约为“61.8%”。
酒吧

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

类型:“horizontal”或“vertical”
默认:“vertical”
图表区域

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

Type:对象
默认:null
图表区域背景色
图表区域背景颜色。使用字符串时,它可以是一个十六进制字符串(例如,“#fdc”)或英语颜色名称。使用对象时,可以提供以下属性:
  • stroke:颜色,以十六进制字符串或英文颜色名称的形式提供。
  • strokeWidth:如果提供,则会在给定宽度的图表区域周围绘制边框(颜色为 stroke)。
类型:字符串或对象
默认:“白色”
图表区域

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

类型:数字或字符串
默认:auto
图表区域

从上边框绘制图表的距离。

类型:数字或字符串
默认:auto
图表面积

图表区域宽度。

类型:数字或字符串
默认:auto
图表高度

图表区域高度。

类型:数字或字符串
默认:auto
图表标题

对于 Material 图表,此选项用于指定副标题。只有 Material 图表支持字幕。

类型:字符串
默认:null
图表标题

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

类型:字符串
默认:null
颜色

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

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

数据点的透明度,1.0 表示完全不透明,0.0 表示完全透明。在散点图、直方图、柱形图和柱形图中,这指的是可见数据:散点图中的点和其他图表中的矩形。在选择数据选项会创建点的图表中,例如折线图和面积图,它指的是悬停或选择时所显示的圆形。该组合图表显示了上述两种行为,而且此选项对其他图表没有任何影响。(如需更改趋势线的不透明度,请参阅趋势线不透明度。)

类型:数字
默认:1.0
EnableInteractivity

图表是抛出基于用户的事件还是对用户交互作出反应。如果为 false,图表不会抛出“select”事件或其他基于互动的事件(但会抛出就绪事件或错误事件),也不会显示悬停文本或根据用户输入而改变。

类型:布尔值
默认:true
explorer

explorer 选项可让用户平移和缩放 Google 图表。 explorer: {} 提供默认的资源管理器行为,让用户能够通过拖动进行水平和垂直平移,以及通过滚动进行缩放。

此功能目前处于实验阶段,可能会在未来版本中发生变化。

注意:分层图表只能使用连续轴(例如数字或日期)。

Type:对象
默认:null
explorer.actions

Google 图表浏览器支持以下三种操作:

  • dragToPan:拖动可在图表中水平和垂直方向平移。如需仅沿横轴平移,请使用 explorer: { axis: 'horizontal' }。同样适用于纵轴。
  • dragToZoom:该浏览器的默认行为是,用户滚动时执行缩放操作。如果使用了 explorer: { actions: ['dragToZoom', 'rightClickToReset'] },在矩形区域内拖动可以放大该区域。我们建议每当使用 dragToZoom 时使用 rightClickToReset。如需了解缩放自定义,请参阅 explorer.maxZoomInexplorer.maxZoomOutexplorer.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”中,提示会显示所有类别值。这对于比较不同系列的值可能很有用。

类型:字符串
默认:“基准”
字体大小

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

类型:数字
默认:自动
字体名称

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

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

在内嵌框架内绘制图表。(请注意,在 IE8 上,此选项会被忽略;所有 IE8 图表都是在 iframe 中绘制的。)

类型:布尔值
默认:false
斧头

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

如需指定具有多个横轴的图表,请先使用 series.targetAxisIndex 定义新轴,然后使用 hAxes 配置该轴。以下示例将系列 1 分配给底部轴,并为其指定自定义标题和文本样式:

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

此属性可以是对象或数组:对象是一组对象,其中每个对象都包含一个指定其所定义轴的数字标签;这是上面显示的格式;数组是一个对象数组,每个轴一个。例如,以下数组样式的表示法与上面显示的 hAxis 对象相同:

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type:对象
默认:null
hAxis.baseline

横轴的基准。

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

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

类型:数字
默认:“黑色”
轴方向

沿横轴的值增长的方向。指定 -1 可颠倒值的顺序。

类型:1 或 -1
默认:1
hAxis.format

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

  • {format: 'none'}:显示不带格式的数字(例如,8000000)
  • {format: 'decimal'}:显示使用千位分隔符的数字(例如,800 万)
  • {format: 'scientific'}:以科学记数法显示数字(例如,8e6)
  • {format: 'currency'}:以本地货币显示数字(例如,8,000,000.00 美元)
  • {format: 'percent'}:以百分比形式显示数字(例如800000000%)
  • {format: 'short'}:显示缩写数字(例如,800 万)
  • {format: 'long'}:以完整字词的形式显示数字(例如800 万)

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

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

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

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

{color: '#333', minSpacing: 20}
Type:对象
默认:null
hAxis.gridlines.color

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

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

图表区域内的水平网格线的近似数量。 如果您为 gridlines.count 指定一个正数,它将用来计算网格线之间的 minSpacing。 您可以指定值 1 来仅绘制一条网格线,指定 0 则不绘制任何网格线。指定 -1(默认值),以根据其他选项自动计算网格线的数量。

类型:数字
默认:-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*/]},
  }
}
    

如需了解更多信息,请参阅日期和时间

Type:对象
默认:null
hAxis.minorGridlines

一个对象,用于配置横轴的次网格,类似于 hAxis.gridlines 选项。

Type:对象
默认:null
hAxis.minorGridlines.color

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

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

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

类型:数字
默认:1
hAxis.minorGridlines.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*/]},
  }
}
    

如需了解更多信息,请参阅日期和时间

Type:对象
默认:null
hAxis.logScale

hAxis 属性将横轴设为对数刻度(要求所有值均为正数)。设为 true 表示“是”。

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

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

  • null - 不执行对数缩放。
  • “log”- 对数缩放。系统无法绘制负值和零值。此选项与设置 hAxis: { logscale: true } 相同。
  • “mirrorLog”- 绘制负值和零值的对数缩放。绘制的负数值是绝对值对数的负值。接近 0 的值按线性比例绘制。
类型:字符串
默认:null
hAxis.textStyle

用于指定横轴文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

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

类型:字符串
默认:“out”
hAxis.ticks

使用指定的数组替换自动生成的 X 轴刻度线。数组的每个元素应该是有效的 tick 值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应该为 tick 值提供 v 属性,以及包含要作为标签显示的文本字符串的可选 f 属性。

除非您指定要替换的 viewWindow.minviewWindow.max,否则 viewWindow 将自动展开即可包含最小和最大基点。

示例:

  • 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] }
类型:元素数组
默认:auto
hAxis.title

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

类型:字符串
默认:null
hAxis.titleTextStyle

用于指定横轴标题文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

将横轴的最大值移至指定值;在大多数图表中,该值就是向右的。如果该值设为小于数据 x 最大值的值,则系统会忽略此值。 hAxis.viewWindow.max 会替换此属性。

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

将横轴的最小值移动到指定值;在大多数图表中,该值会向左移动。此值被设为大于数据最小 x 值时,会被忽略。 hAxis.viewWindow.min 会替换此属性。

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

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

  • “ful”- 缩放水平值,使最大和最小数据值在图表区域的左侧和右侧略微渲染。对于数字,viewWindow 会展开为最近的主网格线,对于日期和时间,会展开为最近的次要网格线。
  • “maximized”- 缩放水平值,使最大和最小数据值触及图表区域的左侧和右侧。这会导致 haxis.viewWindow.minhaxis.viewWindow.max 被忽略。
  • “露骨内容”- 已弃用的选项,用于指定图表区域的左侧和右侧缩放值。(已弃用,因为它与 haxis.viewWindow.minhaxis.viewWindow.max 重复。)这些值之外的数据值会被剪裁。您必须指定 hAxis.viewWindow 对象,以说明要显示的最大值和最小值。
类型:字符串
默认:等同于“美观”,但若使用“haxis.viewWindow.min”和“haxis.viewWindow.max”,优先级更高。
hAxis.viewWindow

指定横轴的剪裁范围。

Type:对象
默认:null
hAxis.viewWindow.max

要呈现的最大水平数据值。

hAxis.viewWindowMode 为“美观”或“最大化”时会被忽略。

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

要呈现的最小水平数据值。

hAxis.viewWindowMode 为“美观”或“最大化”时会被忽略。

类型:数字
默认:auto
高度

图表的高度(以像素为单位)。

类型:数字
默认:容器元素的高度
堆叠

如果设置为 true,则会在每个网域值上堆叠所有系列的元素。 注意:在面积图SteppedArea 图表中,Google 图表会颠倒图例项的顺序,以便与系列元素的堆叠顺序更加一致(例如,系列 0 将是最底层的图例项)。此不适用于条形图

isStacked 选项还支持 100% 堆叠,其中每个网域值上的元素堆栈都会重新缩放,加起来等于 100%。

isStacked 的选项包括:

  • false - 元素将不会堆叠。这是默认选项。
  • true - 在每个网域值上堆叠所有系列的元素。
  • 'percent' - 在每个网域值上堆叠所有系列的元素,然后重新缩放这些元素,使这些元素的总和等于 100%,每个元素的值按 100% 的百分比计算。
  • 'relative' - 在每个系列值上堆叠所有系列的元素,并进行重新缩放,使其相加到 1(每个元素的值按 1 的分数形式进行计算)。
  • 'absolute' - 功能与 isStacked: true 相同。

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

对于 'relative',目标轴默认以 0 到 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}}
Type:对象
默认:null
图例.pageIndex

为图例选择的初始页索引(从零开始)。

类型:数字
默认:0
图例位置

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

  • “bottom”- 位于图表下方。
  • “left”- 位于图表左侧,前提是左轴没有关联的序列。 因此,如果您想要左侧的图例,请使用选项 targetAxisIndex: 1
  • “in”- 在图表内,左上角。
  • “none”- 不显示图例。
  • “right”- 位于图表的右侧。与 vAxes 选项不兼容。
  • “top”- 图表上方。
类型:字符串
默认:“right”
图例 对齐

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

  • “start”- 与为图例分配的区域起始位置对齐。
  • “center”- 在为图例分配的区域中居中显示。
  • “end”- 与为图例分配的区域末端对齐。

起点、中心和终点均相对于图例的样式(垂直或水平)。例如,在“right”图例中,“start”和“end”分别位于顶部和底部;对于“top”图例,“start”和“end”分别位于区域的左侧和右侧。

默认值取决于图例的位置。对于“bottom”图例,默认值为“center”;其他图例默认为“start”。

类型:字符串
默认:自动
图例样式

用于指定图例文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
反向类别

如果此政策设为 true,系统将从下往上绘制系列图片。默认设置为从上到下绘制。

类型:布尔值
默认:false
屏幕方向

图表的方向。如果设置为 'vertical',将旋转图表的轴,使柱状图(例如)变为条形图,而面积图向右移动而不是向上移动:

类型:字符串
默认:“horizontal”
series

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

  • annotations - 要应用于此系列的注解的对象。例如,此属性可用于控制系列的 textStyle

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

    如需查看更完整的自定义内容列表,请参阅各种 annotations 选项。

  • color - 用于此系列的颜色。请指定有效的 HTML 颜色字符串。
  • labelInLegend - 显示在图表图例中的系列的说明。
  • 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'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
工具提示

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type:对象
默认:null
tips.ignoreBounds

如果设置为 true,将允许绘制提示方块超出图表边界。

注意:这仅适用于 HTML 提示。如果使用 SVG 工具提示启用此功能,图表边界之外的任何溢出区域都将被剪裁。如需了解详情,请参阅自定义提示内容

类型:布尔值
默认:false
tips.isHTML

如果设置为 true,则使用 HTML 呈现(而不是 SVG 渲染)提示。如需了解详情,请参阅自定义提示内容

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

类型:布尔值
默认:false
tips.showColorCode

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

类型:布尔值
默认:自动
tip.textStyle

用于指定提示文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tips.trigger

引起提示的提示用户互动:

  • “焦点”- 用户将鼠标悬停在元素上时,会显示提示。
  • “none”- 工具提示不会显示。
  • “selection”- 系统会在用户选择该元素时显示提示。
类型:字符串
默认:“焦点”
趋势线

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

趋势线是按系列进行指定的,因此大多数情况下您的选项如下所示:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    
Type:对象
默认:null
趋势线.颜色

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

类型:字符串
默认:默认系列颜色
趋势线

对于 type: 'polynomial'趋势线,多项式的程度(2 代表二次函数,3 表示立方体等)。(在即将发布的 Google 图表版本中,默认程度可以从 3 更改为 2。)

类型:数字
默认:3
Trendslines.n.labelInLegend

设置后,趋势线会以字符串形式显示在图例中。

类型:字符串
默认:null
Trendslines.n.lineWidth

趋势线的线宽(以像素为单位)。

类型:数字
默认:2
趋势线.不透明度

趋势线的透明度,范围为 0.0(透明)至 1.0(不透明)。

类型:数字
默认:1.0
Trendslines.n.pointSize

趋势线由在图表上加盖一些圆点组成;您可以通过这个很少用到的选项自定义圆点的大小。趋势线的 lineWidth 选项通常更好。不过,如果您使用的是全局 pointSize 选项,且希望为趋势线设置不同的点大小,则需要使用此选项。

类型:数字
默认:1
Trendslines.n.pointsVisible

趋势线由在图表上加盖许多圆点构成。趋势线的 pointsVisible 选项决定了特定趋势线的点是否可见。

类型:布尔值
默认:true
Trendsline.n.showR2

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

类型:布尔值
默认:false
趋势线.类型

趋势线'linear'(默认值)、'exponential' 还是 'polynomial'

类型:字符串
默认:线性
Trendslines.n.visibleInLegend

趋势线公式是否显示在图例中。(会在趋势线提示中显示)。

类型:布尔值
默认:false

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type:对象
默认:null
Vaxis.baseline

vAxis 属性,用于指定纵轴的基线。如果基线大于最大网格线或小于最小网格线,则将舍入为最接近的网格线。

只有 continuous 轴支持此选项。

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

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

只有 continuous 轴支持此选项。

类型:数字
默认:“黑色”
垂直方向

纵轴上的值的增长方向。默认情况下,图表的底部会显示低值。指定 -1 可颠倒值的顺序。

类型:1 或 -1
默认:1
vAxis.format

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

对于数字轴标签,这是小数格式 ICU 模式集的子集。例如,{format:'#,###%'} 会显示值“1,000%”、“750%”和“50%”(值 10、7.5 和 0.5)。您也可以提供以下任一选项:

  • {format: 'none'}:显示不带格式的数字(例如,8000000)
  • {format: 'decimal'}:显示使用千位分隔符的数字(例如,800 万)
  • {format: 'scientific'}:以科学记数法显示数字(例如,8e6)
  • {format: 'currency'}:以本地货币显示数字(例如,8,000,000.00 美元)
  • {format: 'percent'}:以百分比形式显示数字(例如800000000%)
  • {format: 'short'}:显示缩写数字(例如,800 万)
  • {format: 'long'}:以完整字词的形式显示数字(例如800 万)

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

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

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

只有 continuous 轴支持此选项。

类型:字符串
默认:auto
垂直网格线

一个对象,用于配置纵轴上的网格线。请注意,纵轴网格线是水平绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:

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

只有 continuous 轴支持此选项。

Type:对象
默认:null
vAxis.gridlines.color

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

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

图表区域内的水平网格线的近似数量。 如果您为 gridlines.count 指定一个正数,它将用来计算网格线之间的 minSpacing。 您可以指定值 1 来仅绘制一条网格线,指定 0 则不绘制任何网格线。指定 -1(默认值),以根据其他选项自动计算网格线的数量。

类型:数字
默认:-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*/]}
  }
}
    

如需了解更多信息,请参阅日期和时间

Type:对象
默认:null
vAxis.minorGridlines

一个对象,用于在垂直轴上配置次要网格线,类似于 vAxis.gridlines 选项。

只有 continuous 轴支持此选项。

Type:对象
默认:null
vAxis.minorGridlines.color

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

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

minGridlines.count 选项大都已弃用,除非通过将计数设置为 0 来停用次要网格线。次要网格线的数量取决于主网格线(请参阅 vAxis.gridlines.interval)和最小所需空间之间的时间间隔(请参阅 vAxis.minorGridlines.minSpacing)。

类型:数字
默认:1
vAxis.minorGridlines.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*/]},
  }
}
    

如需了解更多信息,请参阅日期和时间

Type:对象
默认:null
vAxis.logScale

如果为 true,则垂直轴为对数刻度。注意:所有值都必须为正数。

只有 continuous 轴支持此选项。

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

vAxis 属性,让纵轴变为对数刻度。可以是:

  • null - 不执行对数缩放。
  • “log”- 对数缩放。系统无法绘制负值和零值。此选项与设置 vAxis: { logscale: true } 相同。
  • “mirrorLog”- 绘制负值和零值的对数缩放。绘制的负数值是绝对值对数的负值。接近 0 的值按线性比例绘制。
类型:字符串
默认:null
vAxis.textPosition

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

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

用于指定纵轴文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
VAxis.ticks

使用指定的数组替换自动生成的 Y 轴 tick。数组的每个元素应该是有效的 tick 值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应该为 tick 值提供 v 属性,以及包含要作为标签显示的文本字符串的可选 f 属性。

除非您指定要替换的 viewWindow.minviewWindow.max,否则 viewWindow 将自动展开即可包含最小和最大基点。

示例:

  • 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] }

只有 continuous 轴支持此选项。

类型:元素数组
默认:auto
影视内容标题

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

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

用于指定垂直轴标题文本样式的对象。此对象的格式为:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
最大轴值

将纵轴的最大值移到指定值;在大多数图表中,此值会上移。如果该值设为小于数据 y 值上限的值,会被忽略。 vAxis.viewWindow.max 会替换此属性。

只有 continuous 轴支持此选项。

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

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

只有 continuous 轴支持此选项。

类型:数字
默认:null
vAxis.viewWindowMode

指定如何缩放纵轴,以呈现图表区域内的值。支持以下字符串值:

  • “ful”- 缩放垂直值,使最大和最小数据值在图表区域底部和顶部略微呈现。对于数字,viewWindow 会展开为最近的主网格线,对于日期和时间,会展开为最近的次要网格线。
  • “maximized”- 缩放垂直值,使最大和最小数据值触及图表区域的顶部和底部。这会导致 vaxis.viewWindow.minvaxis.viewWindow.max 被忽略。
  • “explicit”- 用于指定图表区域的顶部和底部比例值的已弃用选项。(已弃用,因为它与 vaxis.viewWindow.minvaxis.viewWindow.max 重复。超出这些值的数据值会被剪裁。您必须指定 vAxis.viewWindow 对象来描述要显示的最大值和最小值。

只有 continuous 轴支持此选项。

类型:字符串
默认:等同于“美观”,但若使用“vaxis.viewWindow.min”和“vaxis.viewWindow.max”,优先级更高。
vAxis.viewWindow

指定纵轴的剪裁范围。

Type:对象
默认:null
vAxis.viewWindow.max
  • 对于 continuous 轴:

    要呈现的垂直最大数据值。

  • 对于 discrete 轴:

    剪裁窗口结束的位置(从零开始)。此索引及更高级别处的数据点会被剪裁。它与 vAxis.viewWindowMode.min 结合使用,用于定义半开范围 [min, max) 以指示要显示的元素索引。换言之,将显示 min <= index < max 等的每个索引。

vAxis.viewWindowMode 为“美观”或“最大化”时会被忽略。

类型:数字
默认:auto
vAxis.viewWindow.min
  • 对于 continuous 轴:

    要呈现的最小垂直数据值。

  • 对于 discrete 轴:

    剪裁窗口开始的位置(从零开始)。如果索引值低于此值,则会被剪裁。它与 vAxis.viewWindowMode.max 结合使用,用于定义半开范围 [min, max) 以指示要显示的元素索引。换言之,系统会显示使 min <= index < max 的每个索引。当 vAxis.viewWindowMode 为“美观”或“最大化”时会被忽略。

vAxis.viewWindowMode 为“美观”或“最大化”时会被忽略。

类型:数字
默认:auto
width

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

类型:数字
默认:容器元素的宽度

方法

方法
draw(data, options)

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

返回值类型:无
getAction(actionID)

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

返回值类型:对象
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')

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

返回值类型:对象
getChartAreaBoundingBox()

返回一个包含图表内容的左侧、顶部、宽度和高度(即不包括标签和图例)的对象:

var cli = chart.getChartLayoutInterface();

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

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

返回值类型:对象
getChartLayoutInterface()

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

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

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

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

返回值类型:对象
getHAxisValue(xPosition, optional_axis_index)

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

示例:chart.getChartLayoutInterface().getHAxisValue(400)

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

返回值类型:数字
getImageURI()

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

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

请参阅打印 PNG 图表

返回值类型:字符串
getSelection()

返回一组选定图表实体。 可选的实体是条形、图例条目和类别。 对于此图表,在任何给定时刻都只能选择一个实体。 Extended description

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

返回 yPosition 处的垂直数据值,该值是相对于图表容器上边缘的像素偏移。可以是负数。

示例:chart.getChartLayoutInterface().getVAxisValue(300)

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

返回值类型:数字
getXLocation(dataValue, optional_axis_index)

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

示例:chart.getChartLayoutInterface().getXLocation(400)

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

返回值类型:数字
getYLocation(dataValue, optional_axis_index)

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

示例:chart.getChartLayoutInterface().getYLocation(300)

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

返回值类型:数字
removeAction(actionID)

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

返回值类型none
setAction(action)

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

setAction 方法将对象作为其操作参数。此对象应指定 3 个属性:id - 要设置的操作的 ID;text - 应显示在操作提示中的文本;action - 用户点击操作文本时应运行的函数。

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

返回值类型none
setSelection()

选择指定的图表实体。取消之前的任何选择。 可选的实体是条形、图例条目和类别。 对于此图表,一次只能选择一个实体。 Extended description

返回值类型:无
clearChart()

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

返回值类型:无

活动

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

名称
animationfinish

在过渡动画播放完毕时触发。

属性:无
click

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

属性:targetID
error

尝试呈现图表时出错时触发。

属性:ID、消息
legendpagination

用户点击图例分页箭头时触发。传回当前图例中从零开始的页面索引和总页数。

属性:currentPageIndex、totalPages
onmouseover

用户将鼠标悬停在可视实体上时触发。传递相应数据表元素的行索引和列索引。 柱形与数据表中的单元格、列的图例条目(行索引为 null)和类别(行的索引为 null)相关联。

属性:行、列
onmouseout

在用户将鼠标从视觉实体移开时触发。传递相应数据表元素的行索引和列索引。 柱形与数据表中的单元格、列的图例条目(行索引为 null)和类别(行的索引为 null)相关联。

属性:行、列
ready

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

属性:无
select

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

属性:无

数据政策

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