概览
散点图是在图表上绘制点。当用户将鼠标悬停在这些点上时,系统会显示包含更多信息的提示。
Google 散点图在浏览器中使用 SVG 或 VML 渲染,具体取决于浏览器功能。
示例
<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>
<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 应用)在 Google 平台上拥有一致的外观和风格。我们将这项工作称为 Material Design。我们将提供我们所有核心图表的“Material”版本;如果您喜欢它们的外观,则可以使用它们。
  创建 Material 散点图的方式与创建我们现在所说的“经典”散点图类似。您加载 Google Visualization API(尽管使用 'scatter' 软件包,而不是 'corechart' 软件包),定义数据表,然后创建对象(但要创建对象,但要创建类 google.charts.Scatter,而不是 google.visualization.ScatterChart)。
注意:Material 图表无法在旧版 Internet Explorer 中使用。(IE8 及更低版本不支持 Material 图表所需的 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 选项。
  在以下代码中,axes 和 series 选项共同指定图表的双 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 轴仅适用于 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 散点图表,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 值 | 
| 数据类型: | 字符串、数字或日期/日期时间/时间 | 字符串、数字或日期/日期时间/时间 | ... | 字符串、数字或日期/日期时间/时间 | 
| 角色: | data | data | ... | data | 
| 可选的列角色: | 无 | ... | 
如需指定多个系列,请指定两个或多个 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 | 
配置选项
| 名称 | |
|---|---|
| aggregationTarget | 如何将多项数据选择汇总为提示: 
 aggregationTarget通常与selectionMode和tooltip.trigger一起使用,例如:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    类型:字符串 默认:“auto” | 
| animation.duration | 动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字 默认值:0 | 
| animation.easing | 应用于动画的加/减速函数。提供的选项如下: 
 类型:字符串 默认值:“线性” | 
| animation.startup | 
      确定图表是否在首次绘制时呈现动画效果。如果为  类型:布尔值 默认值 false | 
| annotations.boxStyle | 
      对于支持注释的图表, 
var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    目前,此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。注释图表不支持此功能。 类型:object 默认值:null | 
| annotations.datum | 
      对于支持注释的图表, annotations.datum对象可让您覆盖 Google 图表为个别数据元素提供的注释(例如,条形图上每个条形显示的值)的选择。您可以使用annotations.datum.stem.color控制颜色,使用annotations.datum.stem.length控制树干长度,使用annotations.datum.style控制样式。类型:object 默认:颜色为“黑色”;长度为 12;样式为“点”。 | 
| annotations.domain | 
      对于支持注释的图表,借助  annotations.domain对象,您可以替换 Google 图表为某个网域(图表的长轴,例如典型折线图上的 X 轴)提供的注释选择。您可以使用annotations.domain.stem.color控制颜色,使用annotations.domain.stem.length控制树干长度,使用annotations.domain.style控制样式。类型:object 默认:颜色为“黑色”;长度为 5;样式为“点”。 | 
| annotations.highContrast | 
      对于支持注释的图表,您可以使用  annotations.highContrast布尔值替换 Google 图表选择的注释颜色。默认情况下,annotations.highContrast为 true,这会导致图表选择对比度良好的注释颜色:浅色背景配深色,深色配浅色。如果您将annotations.highContrast设为 false 并且未指定自己的注释颜色,Google 图表将为注释使用默认系列颜色:类型:布尔值 默认值:true | 
| annotations.stem | 
      对于支持注释的图表,您可以使用  annotations.stem对象替换 Google 图表为主干样式选择的图表。您可以使用annotations.stem.color控制颜色,使用annotations.stem.length控制茎长度。请注意,主干长度选项对样式为'line'的注释没有影响:对于'line'基准注释,主干长度始终与文本相同;对于'line'域注释,主干长度会延伸在整个图表中。类型:object 默认:颜色为“black”;域注释的长度为 5 个字符,数据注释的长度为 12 个字符。 | 
| annotations.style | 类型:字符串 默认值:“point” | 
| annotations.textStyle | 
      对于支持注释的图表, annotations.textStyle对象用于控制注释文本的外观:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    目前,此选项适用于面积图、条形图、柱形图、组合图、折线图和散点图。 注释图表 不支持此功能。 类型:object 默认值:null | 
| axisTitlesPosition | 轴标题的放置位置(相对于图表区域)。支持的值: 
 类型:字符串 默认值:“out” | 
| backgroundColor | 
      图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串(例如  类型:字符串或对象 默认:“white” | 
| backgroundColor.stroke | 图表边框的颜色,以 HTML 颜色字符串表示。 类型:字符串 默认:“#666” | 
| backgroundColor.strokeWidth | 边框宽度(以像素为单位)。 类型:数字 默认值:0 | 
| backgroundColor.fill | 图表的填充颜色,采用 HTML 颜色字符串的形式。 类型:字符串 默认:“white” | 
| chart.title | 对于 Material 图表,此选项会指定标题。 类型:字符串 默认值:null | 
| chart.subtitle | 对于材质图表,此选项会指定副标题。只有 Material 图表支持字幕。 类型:字符串 默认值:null | 
| chartArea | 
      一个对象,其中包含用于配置图表区域(绘制图表本身,不包括轴和图例)的位置和大小的成员。支持两种格式:数字或数字后跟 %。简单数字是以像素为单位的值;数字后跟 % 表示百分比。示例: 类型:object 默认值:null | 
| chartArea.backgroundColor | 
      图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,'#fdc') 或英文颜色名称。使用对象时,可以提供以下属性:
 
 类型:字符串或对象 默认:“white” | 
| chartArea.left | 从左侧边框绘制图表的距离。 类型:数字或字符串 默认:auto | 
| chartArea.top | 从顶部边框绘制图表的距离。 类型:数字或字符串 默认:auto | 
| chartArea.width | 图表区域宽度。 类型:数字或字符串 默认:auto | 
| chartArea.height | 图表区域高度。 类型:数字或字符串 默认:auto | 
| 颜色 | 
      用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组 默认:默认颜色 | 
| 十字准线 | 一个对象,包含图表的十字准线属性。 类型:object 默认值:null | 
| crosshair.color | 十字光标颜色,表示为颜色名称(例如,"blue”)或 RGB 值(例如,“#adf”)。 类型:字符串 类型:默认 | 
| crosshair.focused | 
      一个对象,包含焦点时十字光标属性。 类型:object 默认:默认 | 
| crosshair.opacity | 
      十字准线不透明度, 类型:数字 默认值:1.0 | 
| crosshair.orientation | 十字准线方向,可以是“垂直”方向(仅适用于竖直发型),“水平”(仅适用于横向)或“同时”(适用于传统十字准线)。 类型:字符串 默认:“选中二者” | 
| crosshair.selected | 
      一个对象,包含选择时十字光标属性。 类型:object 默认:默认 | 
| crosshair.trigger | 
      何时显示十字准线:在  类型:字符串 默认:“选中二者” | 
| curveType | 控制线宽不为零时的曲线。 可以是: 
 类型:字符串 默认:“none” | 
| dataOpacity | 数据点的透明度,1.0 表示完全不透明,0.0 表示完全透明。 在散点图、直方图、条形图和柱形图中,这指的是可见数据:散点图中的点和矩形中的矩形。在选择数据会创建一个点的图表(如折线图和面积图)中,是指在光标悬停或选择时显示的圆形。组合图表展示了这两种行为,此选项对其他图表没有影响。(如需更改趋势线的不透明度,请参阅 趋势线不透明度 。) 类型:数字 默认值:1.0 | 
| enableInteractivity | 图表是抛出基于用户的事件,还是对用户互动做出响应。如果为 false,则图表不会抛出“select”或其他基于互动的事件(但会抛出 ready 事件或 error 事件),也不会显示悬停文本或根据用户输入进行其他更改。 类型:布尔值 默认值:true | 
| explorer | 
       此功能是实验性功能,可能会在未来版本中发生变化。 注意:分层图表仅适用于连续轴(例如数字或日期)。 类型:object 默认值:null | 
| explorer.actions | Google 图表浏览器支持三种操作: 
 类型:字符串数组 默认值:['dragToPan', 'rightClickToReset'] | 
| explorer.axis | 
      默认情况下,使用  类型:字符串 默认:同时进行水平和垂直平移 | 
| explorer.keepInBounds | 
      默认情况下,无论数据位于何处,用户都可以平移。为确保用户不会平移到原始图表以外,请使用  类型:布尔值 默认值:false | 
| explorer.maxZoomIn | 
      探索器可以放大的最大数值。默认情况下,用户可以放大到只有 25% 的原始视图。设置  类型:数字 默认值:0.25 | 
| explorer.maxZoomOut | 
      探索器可以缩小的最大值。默认情况下,用户能够将图表缩小到仅占可用空间的 1/4。设置  类型:数字 默认值:4 | 
| explorer.zoomDelta | 
      当用户执行缩放操作时, 类型:数字 默认值:1.5 | 
| fontSize | 图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性替换此设置。 类型:数字 默认:自动 | 
| fontName | 图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。 类型:字符串 默认:“Arial” | 
| forceIFrame | 在内嵌框架内绘制图表。(请注意,在 IE8 上,此选项会被忽略;所有 IE8 图表都是在 iframe 中绘制的。) 类型:布尔值 默认值:false | 
| hAxis | 包含成员(用于配置各种横轴元素)的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: 
{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    类型:object 默认值:null | 
| hAxis.baseline | 横轴的基线。 类型:数字 默认:自动 | 
| hAxis.baselineColor | 
      横轴基线的颜色。可以是任何 HTML 颜色字符串,例如: 类型:数字 默认:“black” | 
| hAxis.direction | 
      值沿水平轴的增长方向。指定  类型:1 或 -1 默认值:1 | 
| hAxis.format | 
      数字轴标签的格式字符串。这是 
        ICU 模式集
      的一部分。例如, 
 应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情,请参阅 加载具有特定语言区域的图表 。 
      在计算刻度线值和网格线时,系统会考虑所有相关网格线选项的几个备选组合,如果格式化的刻度线标签重复或重叠,则将拒绝备选组合。因此,如果您只想显示整数刻度线值,则可以指定  类型:字符串 默认:auto | 
| hAxis.gridlines | 一个对象,包含用于配置横轴上的网格线的属性。 请注意,横轴网格线是垂直绘制的。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20}类型:object 默认值:null | 
| hAxis.gridlines.color | 图表区域内水平网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:“#CCC” | 
| hAxis.gridlines.count | 
      图表区域内水平网格线的大致数量。
      如果您为  类型:数字 默认值:-1 | 
| hAxis.gridlines.units | 当与图表计算的网格线搭配使用时,替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 
gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    如需了解详情,请参阅日期和时间。 类型:object 默认值:null | 
| hAxis.minorGridlines | 一个对象,其中包含用于在水平轴上配置次要网格线的成员,类似于 hAxis.gridlines 选项。 类型:object 默认值:null | 
| hAxis.minorGridlines.color | 图表区域内水平次要网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:网格线和背景颜色的混合 | 
| hAxis.minorGridlines.count | 除了通过将计数设置为 0 来停用次要网格线之外, 类型:数字 默认值:1 | 
| hAxis.minorGridlines.units | 当与图表计算的 MinorGridlines 一起使用时,替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 
gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    如需了解详情,请参阅日期和时间。 类型:object 默认值:null | 
| hAxis.logScale | 
       类型:布尔值 默认值:false | 
| hAxis.scaleType | 
       
 类型:字符串 默认值:null | 
| hAxis.textPosition | 横轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。 类型:字符串 默认值:“out” | 
| hAxis.textStyle | 一个对象,用于指定横轴文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.ticks | 
      将自动生成的 X 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的  
      除非您指定要替换的  示例: 
 类型:元素数组 默认:auto | 
| hAxis.title | 
       类型:字符串 默认值:null | 
| hAxis.titleTextStyle | 一个对象,用于指定横轴标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.maxValue | 
      将横轴的最大值移至指定值;在大多数图表中,此值为向右移动。如果设置的值小于数据最大 x 值,则忽略。
       类型:数字 默认:自动 | 
| hAxis.minValue | 
      将横轴的最小值移到指定值;在大多数图表中,该值将位于左侧。如果设为大于数据最小 x 值的值,则忽略。
       类型:数字 默认:自动 | 
| hAxis.viewWindowMode | 指定如何缩放横轴以在图表区域内渲染值。支持以下字符串值: 
 类型:字符串 
      默认值:相当于“pretty”,但如果使用,则  haxis.viewWindow.min和haxis.viewWindow.max优先。 | 
| hAxis.viewWindow | 指定横轴的剪裁范围。 类型:object 默认值:null | 
| hAxis.viewWindow.max | 要渲染的最大水平数据值。 当  类型:数字 默认:auto | 
| hAxis.viewWindow.min | 要渲染的最小水平数据值。 当  类型:数字 默认:auto | 
| 高度 | 图表的高度(以像素为单位)。 类型:数字 默认值:所包含元素的高度 | 
| 传奇 | 包含成员的对象,用于配置图例的各个方面。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}类型:object 默认值:null | 
| legend.alignment | 图例的对齐方式。可以是下列选项之一: 
 起点、中心和终点是相对于图例的样式(垂直或水平)而言的。 例如,在“右侧”图例中,“start”和“end”分别位于顶部和底部;对于“顶部”图例,“start”和“end”分别位于区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例,默认值为“center”;其他图例默认为“start”。 类型:字符串 默认:自动 | 
| legend.maxLines | 图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意:用于确定实际渲染线条数的确切逻辑仍然处于变化之中。 此选项目前仅在 Legend.position 为“top”时有效。 类型:数字 默认值:1 | 
| legend.pageIndex | 图例最初选择的从零开始的页面索引。 类型:数字 默认值:0 | 
| legend.position | 图例的位置。可以是下列选项之一: 
 类型:字符串 默认:“right” | 
| legend.textStyle | 用于指定图例文本样式的对象。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| lineWidth | 线条宽度(以像素为单位)。使用 0 可隐藏所有线条并仅显示点。 类型:数字 默认值:0 | 
| 屏幕方向 | 
      图表的方向。设置为  类型:字符串 默认:'水平' | 
| pointShape | 各个数据元素的形状:“circle”“triangle”“square”“diamond”“星形”或“多边形”。如需查看示例,请参阅 积分文档 。 类型:字符串 默认:“circle”(圈子) | 
| pointSize | 
        数据点的直径,以像素为单位。使用 0 可隐藏所有点。您可以使用  类型:数字 默认值:7 | 
| pointsVisible | 
      决定是否显示点。设置为  
      您也可以使用  类型:布尔值 默认值:true | 
| selectionMode | 
      当  类型:字符串 默认:“single” | 
| 系列图书 | 一个对象数组,其中每个对象都描述了图表中相应系列的格式。要为系列使用默认值,请指定空对象 {}。如果未指定系列或值,系统将使用全局值。每个对象都支持以下属性: 
 您可以指定对象数组,其中每个对象都会按给定顺序应用于系列;也可以指定一个对象,其中每个子对象都有一个数字键,用于指示该对象所适用的系列。例如,以下两项声明完全相同,将第一个数据系列声明为黑色且未显示在图例中,而将第四个数据系列声明为红色数据并不存在于图例中: 
series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    类型:对象数组或包含嵌套对象的对象 默认值: | 
| 主题 | 主题是一组预定义的选项值,这些值协同发挥作用来实现特定的图表行为或视觉效果。目前只有一个主题可用: 
 类型:字符串 默认值:null | 
| 标题 | 要在图表上方显示的文本。 类型:字符串 默认:无标题 | 
| titlePosition | 图表标题的放置位置(相对于图表区域)。支持的值: 
 类型:字符串 默认值:“out” | 
| titleTextStyle | 一个对象,用于指定标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| 提示 | 包含用于配置各种提示元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true}类型:object 默认值:null | 
| tooltip.ignoreBounds | 
      如果设置为  注意:这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能,图表边界以外的任何溢出都将被剪裁。如需了解详情,请参阅自定义提示内容。 类型:布尔值 默认值:false | 
| tooltip.isHtml | 如果此政策设为 true,系统会使用 HTML 渲染(而非 SVG 渲染)提示。如需了解详情,请参阅自定义提示内容。 注意:气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值 默认值:false | 
| tooltip.showColorCode | 如果为 true,则在提示中的系列信息旁边显示彩色方块。 类型:布尔值 默认值:false | 
| tooltip.textStyle | 一个用于指定提示文本样式的对象。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| tooltip.trigger | 导致显示提示的用户互动: 
 类型:字符串 默认:“focus” | 
| 趋势线 | 
      在支持
        趋势线
      的图表上显示这些趋势线。默认使用线性趋势线,但您可以使用  
 趋势线是按系列指定的,因此大多数情况下,您的选项将如下所示: 
var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    类型:object 默认值:null | 
| trendlines.n.color | 趋势线 的颜色,以英文颜色名称或十六进制字符串表示。 类型:字符串 默认:默认系列图书颜色 | 
| trendlines.n.degree | 
      对于  类型:数字 默认值:3 | 
| trendlines.n.labelInLegend | 设置后, 趋势线 将以此字符串的形式显示在图例中。 类型:字符串 默认值:null | 
| trendlines.n.lineWidth | 趋势线 的线宽(以像素为单位)。 类型:数字 默认值:2 | 
| trendlines.n.opacity | 趋势线 的透明度,介于 0.0(透明)到 1.0(不透明)。 类型:数字 默认值:1.0 | 
| trendlines.n.pointSize | 
      
        趋势线
      通过在图表上标注一组点来绘制;这个很少用到的选项可让您自定义点的大小。通常最好使用趋势线的  类型:数字 默认值:1 | 
| trendlines.n.pointsVisible | 
      
        趋势线
      是通过在图表上标注若干点来绘制的。趋势线的  类型:布尔值 默认值:true | 
| trendlines.n.showR2 | 是否在图例或趋势线提示中显示 决定系数 。 类型:布尔值 默认值:false | 
| trendlines.n.type | 
      
        趋势线
      是  类型:字符串 默认:线性 | 
| trendlines.n.visibleInLegend | 趋势线 等式是否显示在图例中。(显示在趋势线提示中。) 类型:布尔值 默认值:false | 
| vAxis | 包含用于配置各种纵轴元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}类型:object 默认值:null | 
| vAxis.baseline | 
       类型:数字 默认:自动 | 
| vAxis.baselineColor | 
      指定纵轴基线的颜色。可以是任何 HTML 颜色字符串,例如: 类型:数字 默认:“black” | 
| vAxis.direction | 
      值沿纵轴的增长方向。默认情况下,图表底部会显示较小的值。指定  类型:1 或 -1 默认值:1 | 
| vAxis.format | 
      数字轴标签的格式字符串。这是 
        ICU 模式集
      的一部分。
例如, 
 应用于标签的实际格式源自 API 加载时所使用的语言区域。如需了解详情,请参阅 加载具有特定语言区域的图表 。 
      在计算刻度线值和网格线时,系统会考虑所有相关网格线选项的几个备选组合,如果格式化的刻度线标签重复或重叠,则将拒绝备选组合。因此,如果您只想显示整数刻度线值,则可以指定  类型:字符串 默认:auto | 
| vAxis.gridlines | 一个对象,其中包含用于在纵轴上配置网格线的成员。 请注意,纵轴网格线是水平绘制的。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {color: '#333', minSpacing: 20}类型:object 默认值:null | 
| vAxis.gridlines.color | 图表区域内垂直网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:“#CCC” | 
| vAxis.gridlines.count | 
      图表区域内水平网格线的大致数量。
      如果您为  类型:数字 默认值:-1 | 
| vAxis.gridlines.units | 当与图表计算的网格线搭配使用时,替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 
gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    如需了解详情,请参阅日期和时间。 类型:object 默认值:null | 
| vAxis.minorGridlines | 一个对象,其中包含用于在纵轴上配置次要网格线的成员,类似于 vAxis.gridlines 选项。 类型:object 默认值:null | 
| vAxis.minorGridlines.color | 图表区域内垂直次网格线的颜色。请指定有效的 HTML 颜色字符串。 类型:字符串 默认:网格线和背景颜色的混合 | 
| vAxis.minorGridlines.count | 除通过将计数设置为 0 来停用次要网格线外,MinorGridlines.count 选项大体上已废弃。次网格线的数量取决于主要网格线的间距(请参阅 vAxis.gridlines.interval)和所需的最小空间(请参阅 vAxis.minorGridlines.minSpacing)。 类型:数字 默认值:1 | 
| vAxis.minorGridlines.units | 当与图表计算的 MinorGridlines 一起使用时,替换日期/日期时间/时间数据类型各方面的默认格式。允许设置年、月、日、小时、分钟、秒和毫秒的格式。 常规格式为: 
gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    如需了解详情,请参阅日期和时间。 类型:object 默认值:null | 
| vAxis.logScale | 如果为 true,则使纵轴以对数刻度表示。注意:所有值必须为正数。 类型:布尔值 默认值:false | 
| vAxis.scaleType | 
       
 类型:字符串 默认值:null | 
| vAxis.textPosition | 纵轴文本相对于图表区域的位置。支持的值:“out”“in”“none”。 类型:字符串 默认值:“out” | 
| vAxis.textStyle | 用于指定纵轴文本样式的对象。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    
       类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| vAxis.ticks | 
      将自动生成的 Y 轴刻度线替换为指定数组。数组的每个元素都应是有效的刻度值(例如数字、日期、日期时间或时间)或对象。如果是对象,则应具有用于 tick 值的  
      除非您指定要替换的  示例: 
 类型:元素数组 默认:auto | 
| vAxis.title | 
 类型:字符串 默认:无标题 | 
| vAxis.titleTextStyle | 一个对象,用于指定纵轴标题文本样式。该对象的格式如下: 
{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  
     类型:object 
      默认值: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| vAxis.maxValue | 
      将纵轴的最大值移动到指定值;在大多数图表中这个值都将向上移动。如果设置的值小于数据的最大 y 值,则忽略。
       类型:数字 默认:自动 | 
| vAxis.minValue | 
      将纵轴的最小值移到指定值;在大多数图表中,该值将是向下的。如果设为大于数据最小 y 值的值,则忽略。
       类型:数字 默认值:null | 
| vAxis.viewWindowMode | 指定如何缩放纵轴以在图表区域内渲染值。支持以下字符串值: 
 类型:字符串 
      默认值:相当于“pretty”,但如果使用,则  vaxis.viewWindow.min和vaxis.viewWindow.max优先。 | 
| vAxis.viewWindow | 指定纵轴的剪裁范围。 类型:object 默认值:null | 
| vAxis.viewWindow.max | 要呈现的最大行业数据值。 当  类型:数字 默认:auto | 
| vAxis.viewWindow.min | 要渲染的最小行业数据值。 当  类型:数字 默认:auto | 
| 宽度 | 图表的宽度,以像素为单位。 类型:数字 默认值:所包含元素的宽度 | 
方法
| 方法 | |
|---|---|
| draw(data, options) | 
      绘制图表。只有在  Return Type(返回类型):none | 
| getAction(actionID) | 返回具有所请求的  返回类型:object | 
| getBoundingBox(id) | 
      返回一个对象,其中包含图表元素  
 值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object | 
| getChartAreaBoundingBox() | 返回一个对象,其中包含图表内容的左侧、顶部、宽度和高度(即不包括标签和图例): 
 值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object | 
| getChartLayoutInterface() | 返回一个对象,其中包含有关图表在屏幕上的位置及其元素的信息。 可以对返回的对象调用以下方法: 
 在绘制图表之后调用此方法。 返回类型:object | 
| getHAxisValue(xPosition, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getImageURI() | 返回已序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回类型:字符串 | 
| getSelection() | 
      返回所选图表实体的数组。
    
      可选的实体包括点和图例条目。
    
    
      
    一个点对应数据表中的一个单元格,图例条目对应一列(行索引为 null)。
 
 
对于此图表,在任何给定时刻,只能选择一个实体。
    
      
         返回类型:选择元素数组 | 
| getVAxisValue(yPosition, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getXLocation(dataValue, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| getYLocation(dataValue, optional_axis_index) | 
      返回  示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number | 
| removeAction(actionID) | 从图表中移除包含所请求  返回值类型: none | 
| setAction(action) | 设置当用户点击操作文本时要执行的提示操作。 
       
      任何和所有提示操作都应在调用图表的  返回值类型: none | 
| setSelection() | 
      选择指定的图表实体。取消之前的所有选择。
    
      可选的实体包括点和图例条目。
    
    
      
    一个点对应数据表中的一个单元格,图例条目对应一列(行索引为 null)。
 
 
对于此图表,一次只能选择一个实体。
    
      
         Return Type(返回类型):none | 
| clearChart() | 清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none | 
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
| 名称 | |
|---|---|
| animationfinish | 过渡动画完整播放时触发。 属性:无 | 
| click | 当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。 属性:targetID | 
| error | 尝试渲染图表时出错时触发。 属性:id、message | 
| legendpagination | 当用户点击图例分页箭头时触发。传回当前图例(从 0 开始)的网页索引和总页数。 属性:currentPageIndex、totalPages | 
| onmouseover | 用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 属性:行、列 | 
| onmouseout | 用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 属性:行、列 | 
| ready | 
      该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用  属性:无 | 
| select | 
      当用户点击视觉实体时触发。如需了解已选择的内容,请调用  属性:无 | 
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。