此页面由 Cloud Translation API 翻译。

可视化：动态图表

Overview
示例
正在加载
设置初始状态
数据格式
配置选项
方法
事件
数据政策
Notes

概览

用于探索一段时间内多个指标的动态图表。该图表使用 Flash 在浏览器中呈现。

开发者注意事项：由于 Flash 安全设置，当从浏览器内的文件位置（如 file:///c:/webhost/myhost/myviz.html）而不是网络服务器网址（如 http://www.myhost.com/myviz.html）进行访问时，此（以及所有基于 Flash 的可视化）可能无法正常运行。这通常只是测试问题。您可以按照 Adobe 网站上的说明解决此问题。

示例

（请注意，当作为本地文件加载时，以下代码将不起作用；它必须从网络服务器加载。）

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

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

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

正在加载

google.charts.load 软件包名称为 "motionchart"。

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

该可视化图表的类名称为 google.visualization.MotionChart。

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

数据格式

第一列 必须是“字符串”类型，并且包含实体名称（例如“Apples”“Oranges”“Bananas”（如上例中的“Bananas”）。
第二列必须包含时间值。时间可以采用以下任意格式表示：
- 年 - 列类型：“数字”。示例：2008。
- 月、日和年 - 列类型：“日期”；值应为 JavaScript Date 实例。
- 周数 - 列类型：“string”；值应使用 YYYYWww 模式，该模式符合 ISO 8601 的要求。例如：“2008W03”。
- Quarter - 列类型：“string”；值应采用符合 ISO 8601 的 YYYYQq 格式。示例：“2008Q3”。
后续列可以是“数字”或“字符串”类型。数字列将显示在 X、Y、颜色和尺寸轴的下拉菜单中。字符串列只会显示在“颜色”下拉菜单中。请参见上面的示例。

设置初始状态

您可以指定动态图表以特定状态开头，即一组选定的实体和视图自定义设置。为此，您需要先创建并显示图表，然后进行您希望在图表中显示的状态更改（选择值、更改设置等），然后将这些设置导出为字符串，最后在代码中使用此字符串并将其分配给“状态”选项。接下来的两部分将介绍如何导出和使用州代码。

打开一个工作图表，并设置您要捕获的设置。可以指定的设置包括不透明度级别、缩放以及对数与线性缩放。
点击图表右下角的扳手符号，打开设置面板。
点击左下角的 Advanced 链接，将 Advanced 面板添加到集合中。
展开 Advanced 面板，然后将 State 文本框中的内容复制到剪贴板。（注意：您可以在页面上插入一个调用 getState() 并在消息框中显示当前状态的按钮，而不是第 2-4 步中所述的菜单。）
将上一步中复制的状态字符串分配给代码中的“state”选项参数，如下所示。当传入 draw() 方法中时，图表将初始化为启动时指定的状态。

var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

配置选项

名称	类型	默认	说明
高度	number	300	图表的高度（以像素为单位）。
宽度	number	500	图表的宽度（以像素为单位）。
state	string	无	图表的初始显示状态。这是一个序列化 JSON 对象，描述了缩放级别、所选尺寸、所选气泡/实体以及其他状态说明。请参阅设置初始状态，了解如何进行设置。
showChartButtons	boolean	true	false，则隐藏右上角用于控制图表类型（气泡 / 折线 / 列）的按钮。
showHeader	boolean	true	false 隐藏实体的标题标签（派生自数据表中第一列的标签）。
showSelectListComponent	boolean	true	false 则隐藏可见实体的列表。
showSidePanel	boolean	true	false 表示隐藏右侧面板。
showXMetricPicker	boolean	true	false 则隐藏 x 的指标选择器。
showYMetricPicker	boolean	true	false 会隐藏 y 的指标选择器。
showXScalePicker	boolean	true	false 则隐藏 x 的比例选择器。
showYScalePicker	boolean	true	false 则隐藏 y 的比例选择器。
showAdvancedPanel	boolean	true	false 停用设置面板中的选项区。

方法

方法	返回值类型	说明
`draw(data, options)`	无	使用提供的选项绘制图表。
`getState()`	string	返回动态图表的当前state，已序列化为 JSON 字符串。要将此状态分配给图表，请将此字符串分配给 `draw()` 方法中的 `state` 选项。这通常用于在启动时指定自定义图表状态，而不是使用默认状态。

事件

名称	说明	属性
`error`	尝试渲染图表时出错时触发。	id、message
准备就绪	该图表已准备好进行外部方法调用。如果您想与图表交互，并在绘制图表后调用相应方法，则应在调用绘制方法之前为该事件设置监听器，并仅在事件触发后调用监听器。	收不到任何通知
状态更改	用户以某种方式与图表进行了互动。调用 `getState()` 可了解图表的当前状态。	无

数据政策

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

说明

由于 Flash 安全设置，当从浏览器的文件位置（如 file:///c:/webhost/myhost/myviz.html）而不是从网络服务器网址（如 http://www.myhost.com/myviz.html）进行访问时，此（以及所有基于 Flash 的可视化）可能无法正常运行。这通常只是测试问题。您可以按照 Macromedia 网站上的说明来解决此问题。