直方图

概览

直方图是一种将数值数据分箱的图表,可将分箱显示为细分列。它们用于描述数据集的分布:值落入范围的频率。

Google 图表会自动选择箱数。所有分箱的宽度相同,并且高度与箱中数据点的数量成比例。在其他方面,直方图与柱形图类似。

示例

下面是恐龙身长的直方图:

直方图会显示最常见的小于 10 米的垃圾桶,而超过 40 米的恐龙只有一种。我们可以将光标悬停在此柱上,发现它就是 Seismosaurus(这只是一头非常庞大的文凭;古生物学家不确定)。

生成此直方图的代码如下所示。定义数据(此处使用 google.visualization.arrayToDataTable)后,可通过调用 google.visualization.Histogram 来定义图表,并使用 draw 方法进行绘制。

<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"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

可以省略标签(这里是恐龙名称),在这种情况下,提示将仅显示数值。

控制颜色

下面是民族人口的直方图:

有超过 200 个国家/地区的人口不到 1 亿,之后则呈现严峻尾声。

此直方图使用 colors 选项以绿色绘制数据:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

与所有 Google 图表一样,颜色可以指定为英文名称或十六进制值。

控制存储分区

默认情况下,Google 图表将使用知名的直方图算法自动选择范围大小。不过,有时您可能需要替换该行为,上面的图表便是示例。第一个存储分区中的国家/地区太多了,很难对其他国家/地区进行检查。

对于此类情况,直方图提供了两个选项:histogram.bucketSize(用于替换算法并对存储分区大小进行硬编码)和 histogram.lastBucketPercentile。第二个选项需要更多说明:它会更改存储分区大小的计算,以忽略高于或低于指定值(以您指定的百分比为准)的值。这些值仍包含在直方图中,但不会影响其分桶方式。如果您不希望离群值归入自己的存储分区中,系统会改用第一个或最后一个存储分区对离群值进行分组。

在上图中,我们在计算存储分区大小时忽略了前五个值和后五个值。这些值仍会绘制图表;唯一的变化是存储分区大小,但这样做会让直方图更具可读性。

此示例还展示了如何更改纵轴的缩放比例以使用“镜像日志”缩放比例,这在绘制具有长小值长尾的数据图表时也有所帮助。

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

如您所见,如果将计算结果的顶部和底部百分之五移除,得到的存储分区大小将为 10000000,否则为 100000000。如果您一直知道 10,000,000 的存储分区大小符合您的需求,那么您可以使用 histogram.bucketSize 来实现此目的:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

在以下示例中,我们展示了如何扩大存储分区的范围,并显示更多存储分区,并且它们之间没有间隙。maxNumBuckets 选项可用于增加默认桶数。histogram.minValuehistogram.maxValue 选项将扩大存储分区的范围,但请注意,如果存在超出此范围的数据,这些选项不会缩小此范围。

此示例还表明,您可以使用 hAxis 的显式 ticks 选项指定要为每个存储分区显示的刻度线。这不会影响分区本身,只会影响 tick 的显示方式。

另请注意,我们指定了 chartArea.width,因此,在没有视觉伪影的情况下,存储分区的数量会更加准确。以下是此示例的选项。

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

多系列图书

下面是根据标准模型得出的子原子粒子费用直方图:

上图有一个系列,其中包含所有粒子。子原子粒子可以分为四组:夸克、量子和玻色子。我们将每个集合视为自己的系列:

在此图表中,我们针对四种类型的子原子粒子分别使用不同的系列(因此也使用了颜色)。我们将 interpolateNulls 明确设置为 false,以确保不会绘制 null 值(因为序列长度不等需要)。我们还设置了 legend.maxLines,以向图例再添加一行代码:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

正在加载

google.charts.load 软件包名称为 "corechart"

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

可视化图表的类名称为 google.visualization.Histogram

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

数据格式

填充直方图数据表的方法有两种。如果只有一个系列:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...当有多个系列时:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

目前,直方图不支持可选列角色。

配置选项

名称
动画时长

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

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

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

  • “Linear”- 恒速。
  • “in”- 缓入 - 开始缓慢,加速。
  • “out”- 缓出 - 快速启动和减速。
  • “inAndOut”- 缓入和缓出 - 开始缓慢,加快,然后减慢。
类型:字符串
默认:“线性”
animation.startup

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

类型:布尔值
默认 false
坐标轴位置

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

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

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

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

图表边框的颜色,采用 HTML 颜色字符串的形式。

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

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

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

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

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

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

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

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

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

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

类型:数字或字符串
默认:自动
图表区域.宽度

图表区域宽度。

类型:数字或字符串
默认:自动
图表.a.height

图表区域高度。

类型:数字或字符串
默认:自动
颜色

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

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

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

类型:数字
默认:1.0
启用互动

图表是抛出基于用户的事件还是响应用户互动。如果设为 false,则图表不会抛出“select”事件或其他基于互动的事件(但会抛出“ready”或“error”事件),并且不会显示悬停文本或者根据用户输入以其他方式更改。

类型:布尔值
默认:true
focusTarget

悬停鼠标时获得焦点的实体的类型。此外,还会影响点击鼠标时选择的实体,以及与事件相关联的数据表元素。可以是以下某一项:

  • “datum”- 关注单个数据点。与数据表中的单元格相关联。
  • 'category' [类别] - 侧重于沿主轴分组的所有数据点。对应于数据表中的一行。

在 focusTarget 'category' 中,提示显示所有类别值。这可用于比较不同系列的值。

类型:字符串
默认:'datum'
字体大小

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

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

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

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

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

类型:布尔值
默认:false

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type:对象
默认:null
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.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

hAxis 主网格线之间的最小屏幕空间(以像素为单位)。 主要网格的默认值是 40(线性比例)和 20(对数比例)。 如果您指定 count 而不是 minSpacing,则从计数计算 minSpacing。相反,如果您指定 minSpacing 而不是 count,则从 minSpacing 中计算计数。如果您同时指定两者,则 minSpacing 会替换。

类型:数字
默认:计算出的值
hAxis.gridlines.multiple

所有网格线和刻度线的值都必须是此选项值的倍数。请注意,与间隔不同的是,不考虑 10 的倍数的幂。因此,您可以通过指定 gridlines.multiple = 1 将刻度强制为整数,也可以通过指定 gridlines.multiple = 1000 将刻度强制为 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*/]},
  }
}
    

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

Type:对象
默认:null
hAxis.minorGridline

包含用于配置横轴上的次要网格线的对象,与 hAxis.gridlines 选项类似。

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

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

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

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

类型:数字
默认:1
hAxis.minorGridlines.interval

minGridlines.interval 选项与主网格线选项类似,但所选间隔将始终是主网格线的偶数除数。 线性缩放的默认间隔为 [1, 1.5, 2, 2.5, 5],日志缩放的默认间隔为 [1, 2, 5]

类型:数字
默认:1
hAxis.minorGridlines.minSpacing

相邻的次要网格线之间以及次要网格和主要网格线之间所需的最小空间(以像素为单位)。对于线性比例,默认值是主要网格的 1/2;对于日志比例,最小值为 1/5 的 minSpacing。

类型:数字
默认:计算出
hAxis.minorGridlines.multiple

与主要 gridlines.multiple 相同。

类型:数字
默认:1
hAxis.minorGridlines.units

在与图表计算的 MinorDisk 网格线结合使用时,覆盖日期/日期时间/时段数据类型各个方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为:

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

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

类型:字符串
默认:使用“out”
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.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.allowContainerBoundaryTextCutoff

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

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

如果为 true,请以某个角度绘制横轴文本,以帮助沿轴放置更多文本;如果为 false,则垂直绘制横轴文本。默认行为是,如果直立绘制时无法使文本完全适合文本,则将其倾斜。请注意,仅当 hAxis.textPosition 设置为“out”(默认值)时,此选项才可用。 日期和时间默认为 false

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

横轴文本的角度(如果绘制为斜面)。如果 hAxis.slantedTextfalse 或处于自动模式,并且图表决定水平绘制文本,则该设置将被忽略。如果角度为正,则逆时针旋转;如果角度为负,则顺时针旋转。

类型:数字,-90-90
默认:30 个
hAxis.maxAlternation

水平轴文本的层级数上限。如果轴文本标签太拥挤,服务器可能会上移或下移相邻标签,以使标签更靠近。此值用于指定要使用的最多层数;如果标签可以拟合而不会重叠,服务器可以使用的层数会更少。对于日期和时间,默认值为 1。

类型:数字
默认:2
hAxis.maxTextLines

文本标签允许的行数上限。如果标签过长,则标签可以占据多行,并且默认情况下,行数受可用空间的高度限制。

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

两个相邻文本标签之间允许的最小水平间距(以像素为单位)。如果标签间隔太密集或标签过长,间距可能会降至此阈值以下,并且在这种情况下,系统会应用其中一个标签简洁性指标(例如截断标签或丢弃一些标签)。

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

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

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

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

  • “ nice”- 缩放水平值,让数据最大值和最小值在图表区域的左侧和右侧呈现出一定的距离。 对于数字,viewWindow 会展开为最近的主网格线,对于日期和时间,扩展为最近的次要网格线。
  • “maximized”- 缩放水平值,使数据最大值和最小值与图表区域的左侧和右侧接触。这会使 haxis.viewWindow.minhaxis.viewWindow.max 被忽略。
  • “露骨内容”- 已弃用的选项,用于指定图表区域的左侧和右侧缩放值。(已弃用,因为它与 haxis.viewWindow.minhaxis.viewWindow.max 是多余的。)超出这些值的数据值会被剪裁。您必须指定一个 hAxis.viewWindow 对象,用于描述要显示的最大值和最小值。
类型:字符串
默认:相当于“ nice”,但使用 haxis.viewWindow.minhaxis.viewWindow.max 时优先级更高。
hAxis.viewWindow

指定横轴的剪裁范围。

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

剪裁窗口结束的位置索引(从零开始)。此索引及更高级别的数据点会被剪裁。它与 vAxis.viewWindowMode.min 一起定义了一个半开范围 [min, max),表示要显示的元素索引。换句话说,将显示 min <= index < max 等每个索引。

hAxis.viewWindowMode 为“ nice”或“maximized”时,忽略。

类型:数字
默认:自动
hAxis.viewWindow.min

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

hAxis.viewWindowMode 为“ nice”或“maximized”时,忽略。

类型:数字
默认:自动
直方图.bucketSize

硬编码每个直方图栏的大小,而不是让它通过算法确定。

类型:数字
默认:自动
直方图.hideBucketItems

省略直方图块之间的细除法,使其变为一系列实线。

类型:布尔值
默认:false
直方图.lastBucketPercentile

计算直方图的存储分区大小时,忽略顶部和底部的 lastBucketPercentile%。这些值仍包含在直方图中,但不影响分桶。

类型:数字
默认:0
直方图.最小值

扩大存储分区范围以包含此值。

类型:数字
默认:自动 - 使用流量下限
直方图

扩大存储分区范围以包含此值。

类型:数字
默认:自动 - 使用流量上限
直方图.numBucketsRule

如何计算默认桶数。可能的值包括:

  • 'sqrt' - 计算数据点数量的平方根。
  • 'sturges' - 根据二项式分布计算得出。 隐式假设大致呈正态分布。
  • 'rice' - 更轻松地取代 Sturges 规则。
如需了解详情,请参阅维基百科 - 直方图:箱数和宽度

类型:字符串
默认'sqrt'
高度

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

类型:数字
默认:包含元素的高度
interpolateNulls

是否猜测缺少的点的值。如果为 true,则它将根据相邻点来猜测任何缺失数据的值。如果为 false,则会在未知点处换行。

使用 isStacked: true/'percent'/'relative'/'absolute' 选项的区域图表不支持此操作。

类型:布尔值
默认:false
堆叠

如果设置为 true,则在每个网域值上堆叠所有系列的元素。注意:在 ColumnAreaSteppedArea 图表中,Google 图表会颠倒图例项的顺序,以便更好地与堆叠系列元素的堆叠方式保持一致(例如,Series 0 将是最底层的图例项)。此要求适用于条形图

isStacked 选项还支持 100% 堆叠,其中每个网域值上的堆栈堆叠会重新缩放,总和为 100%。

isStacked 的选项包括:

  • false - 元素不会堆叠。这是默认选项。
  • true - 在每个网域值上堆叠所有系列的元素。
  • 'percent' - 在每个系列值下堆叠所有系列的元素,并进行重新缩放,使其总和为 100%,每个元素值按 100% 的百分比进行计算。
  • 'relative' - 在每个系列值下堆叠所有系列的元素,并进行重新缩放,使其总和为 1,并且每个元素的值按 1 的分数计算得出。
  • 'absolute' - 与 isStacked: true 作用相同。

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

对于 'relative',目标轴将默认根据相对 0-1 的缩放比例为 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
图例匹配

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

  • “start”- 与为图例分配的区域的开头对齐。
  • “center”- 以分配给图例的区域为中心。
  • 'end' - 与为图例分配的区域末端对齐。

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

默认值取决于图例的位置。对于“底部”图例,默认值为“居中”;其他图例默认为“开始”。

类型:字符串
默认:自动
图例.max 行

图例中的行数上限。将此列设置为大于 1 的数字,以便为图例添加线条。注意:用于确定实际呈现的行数的准确逻辑仍在变化。

目前,仅当图例位置为“顶部”时,此选项才有效。

类型:数字
默认:1
图例页

选择的初始页面索引(从零开始)。

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

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

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

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

{ 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>}
屏幕方向

图表的方向。如果设置为 'vertical',则旋转图表的轴,以便(例如)柱形图变为条形图,而面积图会向右而不是向上展开:

类型:字符串
默认:“横向”
反向类别

如果设置为 true,则会从右向左绘制系列。默认是从左向右绘制。

类型:布尔值
默认:false
series

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

  • 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
标题

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

类型:字符串
默认:无标题
title 位置

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

  • 输入 - 在图表区域内绘制标题。
  • 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
hint.isHTML

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

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

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

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

类型:布尔值
默认:自动
提示文本

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

{ 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>}
tooltip.trigger

使提示显示的用户交互:

  • “focus”:用户将鼠标悬停在元素上时,系统会显示提示。
  • “none”- 提示将不会显示。
类型:字符串
默认:焦点
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

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

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

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

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

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

类型:数字
默认:'black'
vAxis.direction

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

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

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

  • {format: 'none'}:显示无格式的数字(例如,800 万)
  • {format: 'decimal'}:显示包含千位分隔符的数字(例如,800 万)
  • {format: 'scientific'}:以科学记数法表示数字(例如,8e6)
  • {format: 'currency'}:以当地货币显示数字(例如,$8000000.00)
  • {format: 'percent'}:以百分比形式显示数字(例如,8 亿
  • {format: 'short'}:显示缩写数字(例如,800 万)
  • {format: 'long'}:以完整字词(如800 万)

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

在计算刻度线值和网格线时,系统将考虑所有相关网格选项的若干备选组合,如果带格式的对勾标记被复制或重叠,则替代项将被拒绝。因此,如果您只想显示整数刻度值,则可以指定 format:"#",但请注意,如果没有替代条件满足此条件,则不会显示网格或刻度线。

类型:字符串
默认:自动
vAxis.gridlines

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

{color: '#333', minSpacing: 20}
Type:对象
默认: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

hAxis 主网格线之间的最小屏幕空间(以像素为单位)。 主要网格的默认值是 40(线性比例)和 20(对数比例)。 如果您指定 count 而不是 minSpacing,则从计数计算 minSpacing。相反,如果您指定 minSpacing 而不是 count,则从 minSpacing 中计算计数。如果您同时指定两者,则 minSpacing 会替换。

类型:数字
默认:计算出的值
vAxis.gridlines.multiple

所有网格线和刻度线的值都必须是此选项值的倍数。请注意,与间隔不同的是,不考虑 10 的倍数的幂。因此,您可以通过指定 gridlines.multiple = 1 将刻度强制为整数,也可以通过指定 gridlines.multiple = 1000 将刻度强制为 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*/]}
  }
}
    

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

Type:对象
默认:null
vAxis.minorGridline

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

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

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

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

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

类型:数字
默认:1
vAxis.minorGridlines.interval

minGridlines.interval 选项与主网格线选项类似,但所选间隔将始终是主网格线的偶数除数。 线性缩放的默认间隔为 [1, 1.5, 2, 2.5, 5],日志缩放的默认间隔为 [1, 2, 5]

类型:数字
默认:1
vAxis.minorGridlines.minSpacing

相邻的次要网格线之间以及次要网格和主要网格线之间所需的最小空间(以像素为单位)。对于线性比例,默认值是主要网格的 1/2;对于日志比例,最小值为 1/5 的 minSpacing。

类型:数字
默认:计算出
vAxis.minorGridlines.multiple

与主要 gridlines.multiple 相同。

类型:数字
默认:1
vAxis.minorGridlines.units

在与图表计算的 MinorDisk 网格线结合使用时,覆盖日期/日期时间/时段数据类型各个方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。

常规格式为:

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,则将纵轴设置为对数刻度。注意:所有值都必须为正数。

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

vAxis 属性:使垂直轴为对数刻度。可以是:

  • null - 不执行对数缩放。
  • “log”- 对数缩放。系统不会绘制负值和零值。此选项与设置 vAxis: { logscale: true } 相同。
  • “glassLog”- 对数绘制的负值和零值。绘制的负数为绝对值对数的负值。接近 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] }
类型:元素数组
默认:自动
vAxis.title

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>}
vAxis.maxValue

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

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

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

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

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

  • “ nice”- 缩放垂直值,让数据最大值和最小值在图表区域底部和顶部略呈现。 对于数字,viewWindow 会展开为最近的主网格线,对于日期和时间,扩展为最近的次要网格线。
  • “maximized”- 缩放垂直值,使数据最大值和最小值接触到图表区域的顶部和底部。这会使 vaxis.viewWindow.minvaxis.viewWindow.max 被忽略。
  • '露骨内容' - 已弃用的用于指定图表区域顶部和底部比例值的选项。(已弃用,因为它与 vaxis.viewWindow.minvaxis.viewWindow.max 是多余的。超出这些值的数据值将被剪裁。您必须指定一个 vAxis.viewWindow 对象,用于描述要显示的最大值和最小值。
类型:字符串
默认:相当于“ nice”,但使用 vaxis.viewWindow.minvaxis.viewWindow.max 时优先级更高。
vAxis.viewWindow

指定纵轴的剪裁范围。

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

要呈现的垂直数据值的上限。

vAxis.viewWindowMode 为“ nice”或“maximized”时,忽略。

类型:数字
默认:自动
vAxis.viewWindow.min

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

vAxis.viewWindowMode 为“ nice”或“maximized”时,忽略。

类型:数字
默认:自动
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()

属性:无

数据政策

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