可视化:散点图

概览

散点图会在图表中绘制点。当用户将鼠标悬停在各个点上时,系统会显示包含更多信息的提示。

Google 散点图使用 SVGVML 在浏览器中渲染,具体取决于浏览器功能。

示例

<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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

更改形状并为其添加动画效果

默认情况下,散点图表示带圆形的数据集的元素。您可以使用 pointShape 选项指定其他形状,详见自定义点文档。

与大多数其他 Google 图表一样,您可以使用事件为这些图表添加动画效果。您可以为第一个 ready 事件添加一个事件监听器,并在完成所需的修改后重新绘制图表。在第一个 ready 事件之后,您可以监听 animationfinish 事件来重复该过程,从而产生连续的动画。animation 选项用于控制重新绘制的方式:立即(无动画)或顺畅,以及流畅和速度如何以及行为如何。

优质零部件
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
完整 HTML
<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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

创建 Material 散点图

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

创建 Material 散点图与创建我们现在所说的“传统”散点图类似。加载 Google 可视化 API(尽管使用 'scatter' 软件包而不是 'corechart' 软件包),定义您的数据表,然后创建对象(但属于 google.charts.Scatter 类,而非 google.visualization.ScatterChart 类)。

注意:Material 图表无法在旧版 Internet Explorer 中使用。(IE8 及更低版本不支持 SVG,而 Material Chart 要求使用 SVG)。

与传统散点图相比,Material 散点图有多项细微的改进,包括可变不透明度用于重叠点的易读性、改进的调色板、更清晰的标签格式、更紧凑的默认间距、更柔和的网格和标题(以及添加字幕)。

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

Material 图表目前处于 Beta 版阶段。其外观和互动在很大程度上是最终的,但传统图表中的许多选项尚未提供。您可以在此问题中找到尚不支持的选项列表。

此外,声明选项的方式尚未最终确定,因此如果您使用的是任何传统选项,则必须将其替换为 Material 选项,具体方法是替换以下代码行:

chart.draw(data, options);

...替换为:

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

双 Y 轴图表

有时,您可能希望在散点图中显示两个数据系列,并包含两个独立的 y 轴:一个数据系列的左轴,另一个数据系列的右轴:

请注意,我们的两个 Y 轴不仅具有不同的标签(“最终考试成绩”与“学习时长”),而且它们都有各自的独立量表和网格线。如果要自定义此行为,请使用 vAxis.gridlines 选项。

在下面的代码中,axesseries 选项结合使用可以指定图表的双重 Y 外观。series 选项指定用于每个轴的轴('final grade''hours studied';它们不需要与数据表中的列名称有任何关系)。然后,axes 选项将此图表设为双 Y 轴图表,将 'Final Exam Grade' 轴放在左侧,'Hours Studied' 轴放在右侧。

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

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

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

        drawMaterialChart();
    };

热门 X 图

注意:顶部 X 轴仅适用于 Material 图表(即带有 scatter 软件包的图表)。

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

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

正在加载

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

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

对于 Material Scatter Charts,google.charts.load 软件包名称为 "scatter",而可视化图表的类名称为 google.charts.Scatter

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

数据格式

:表中的每一行表示一组具有相同 x 轴值的数据点。

  第 0 列 第 1 列 …… N
目的: 数据点 X 系列 1 Y 值 …… 系列 N Y 值
数据类型: 字符串、数字或日期/日期时间/时间 字符串、数字或日期/日期时间/时间 …… 字符串、数字或日期/日期时间/时间
角色: 数据 数据 …… 数据
可选的列角色

……

如需指定多个系列,请指定两个或更多 Y 轴列,并且仅在一个 Y 列中指定 Y 值:

X 值 系列 1 Y 值 系列 2 Y 值
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

配置选项

名称
aggregateTarget
如何将多项数据选择整合到提示中:
  • 'category':按 x 值对所选数据进行分组。
  • 'series':按系列对所选数据进行分组。
  • 'auto':如果所有选定数据具有相同的 x 值,则按 x 值对所选数据进行分组,否则按数据系列分组。
  • 'none':每个选择仅显示一个提示。
aggregationTarget 通常与 selectionModetooltip.trigger 搭配使用,例如:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
类型:字符串
默认:自动
动画时长

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

类型:字符串
默认:“白色”
图表标题

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

类型:字符串
默认:null
副标题

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

类型:字符串
默认:null
图表区域

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

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

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

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

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

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

图表区域宽度。

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

图表区域高度。

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

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

类型:字符串数组
默认:默认颜色
十字准线

包含图表的十字准线属性的对象。

Type:对象
默认:null
Crosshair.color

十字准线颜色,以颜色名称表示(例如,“blue”)或 RGB 值(例如,“#adf”)。

类型:字符串
类型:默认值
Crosshair 聚焦

一个聚焦在十字准线属性上的对象。
示例: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type:对象
默认:默认。
Crosshair.opacity

十字光标的不透明度,其中 0.0 表示完全透明,1.0 表示完全不透明。

类型:数字
默认:1.0
Crosshair.orientation

十字准线方向,只能为垂直头发使用“竖直”设置,仅水平头发可使用“水平”方向,或者使用传统十字准线时可使用“两者”同时使用。

类型:字符串
默认:“两者”
十字形

包含十字准线属性后的对象。
示例: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type:对象
默认:默认。
Crosshair.trigger

何时显示十字光标:在 'focus''selection''both' 上。

类型:字符串
默认:“两者”
曲线类型

当线条宽度不为零时控制线条的曲线。可以是:

  • “none”- 没有曲线的直线。
  • 'function' - 线的角度将会平滑。
类型:字符串
默认:无
dataOpacity

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

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

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

类型:布尔值
默认: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
字体大小

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

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

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

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

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

类型:布尔值
默认:false

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

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

横轴的基准。

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

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

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

横轴上值的方向。指定 -1 可以反转值的顺序。

类型:1 或 -1
默认:1
hAxis.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:"#",但请注意,如果没有替代条件满足此条件,则不会显示网格或刻度线。

类型:字符串
默认:自动
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.minorGridline

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

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

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

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

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

类型:数字
默认: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.logScale

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

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

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

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

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

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

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

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

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

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

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

类型:数字
默认:自动
高度

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

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

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

{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>}
线宽

线条宽度(以像素为单位)。使用零可以隐藏所有线条,并且只显示相应的点。

类型:数字
默认:0
屏幕方向

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

类型:字符串
默认:“横向”
点形状

各个数据元素的形状:“圆形”、“三角形”、“方形”、“菱形”、“星形”或“多边形”。如需查看示例,请参阅积分文档

类型:字符串
默认:“圆形”
点大小

数据点的直径(以像素为单位)。使用零可隐藏所有点。您可以使用 series 属性替换各个系列的值。如果你使用趋势线,此选项也会影响构成它的点的 pointSize,从而改变趋势线的表征宽度。为避免出现这种情况,您可以使用 trendlines.n.pointsize 选项替换它。

类型:数字
默认:7
积分可见

确定是否显示点。设置为 false 可隐藏所有点。您可以使用 series 属性替换各个系列的值。如果您使用的是趋势线,则 pointsVisible 选项将影响所有趋势线上的点的可见性,除非您使用 trendlines.n.pointsVisible 选项将其替换掉。

也可以通过使用 "point {visible: true}" 形式的样式角色替换此值。

类型:布尔值
默认:true
选择模式

selectionMode'multiple' 时,用户可以选择多个数据点。

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

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

  • color - 用于本系列的颜色。请指定有效的 HTML 颜色字符串。
  • labelInLegend - 要在图表图例中显示的系列的说明。
  • lineWidth - 替换此系列的全局 lineWidth 值。
  • pointShape - 替换此系列的全局 pointShape 值。
  • pointSize - 替换此系列的全局 pointSize 值。
  • pointsVisible - 替换此系列的全局 pointsVisible 值。
  • 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.ignoreBounds

如果设置为 true,则允许以非图形方式沿图表边界绘制提示。

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

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

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

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

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

如果为 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”- 提示将不会显示。
  • “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
趋势线.n.labelInLegend

设置后,趋势线会在图例中显示为此字符串。

类型:字符串
默认:null
趋势线.n.lineWidth

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

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

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

类型:数字
默认:1.0
趋势线.n 点大小

趋势线通过在图表上标出多个点来构造;借助这个很少用到的选项,您可以自定义点的大小。通常情况下,最好选择趋势线的 lineWidth 选项。不过,如果您使用的是全局 pointSize 选项,并且希望趋势线的点大小不同,则需要使用此选项。

类型:数字
默认:1
趋势线.显示状态

趋势线是通过在图表上盖住多个点构成的。趋势线的 pointsVisible 选项决定了特定趋势线的点是否可见。

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

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

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

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

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

趋势线方程式是否出现在图例中。(它会出现在趋势线提示中)。

类型:布尔值
默认:false

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

{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.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.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()

返回一组选定图表实体。 可选择的实体是点和图例条目。 点对应数据表中的单元格,以及列的图例条目(行索引为 null)。 在此图表中,在任何时候都只能选择一个实体。 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()

选择指定的图表实体。取消之前选择的所有内容。 可选择的实体是点和图例条目。 点对应数据表中的单元格,以及列的图例条目(行索引为 null)。 对于此图表,一次只能选择一个实体。 Extended description

返回值类型:无
clearChart()

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

返回值类型:无

事件

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

名称
animationfinish

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

属性:无
click

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

属性:targetID
error

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

属性:ID、消息
legendpagination

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

属性:currentPageIndex、totalPages
onmouseover

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

属性:行、列
onmouseout

在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。

属性:行、列
ready

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

属性:无
select

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

属性:无

数据政策

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