概览
可让您了解多个指标随时间变化的动态图表。该图表在浏览器中使用 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”)。
- 第二列必须包含时间值。时间可用以下任意格式表示:
- 后续列的类型可以是“数字”或“字符串”。X、Y、Color 和 Size 轴的下拉菜单中会显示数值列。字符串列将仅显示在“颜色”的下拉菜单中。请参见上面的示例。
设置初始状态
您可以指定动态图表以特定状态开头:即一组选定的实体和视图自定义。为此,您需要先创建并显示该图表,接着进行您希望在图表中显示的任何状态更改(选择值、更改设置等),然后将这些设置导出为字符串,最后在代码中使用此字符串,将其分配给“状态”选项。后面两个部分介绍了如何导出和使用状态代码。
- 打开工作图表,然后设置要捕获的设置。您可以指定的设置包括不透明度、缩放级别,以及对数与线性扩缩。
- 点击图表右下角的扳手符号,打开“设置”面板。
- 点击左下角的高级链接,将高级面板添加到该组。
- 展开高级面板,并将状态文本框的内容复制到剪贴板。(注意:您可以在网页上插入调用
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 | 图表的高度(以像素为单位)。 |
width | number | 500 | 图表的宽度(以像素为单位)。 |
state | 字符串 | 无 | 图表的初始显示状态。这是一个序列化 JSON 对象,用于描述缩放级别、所选维度、所选的气泡/实体以及其他状态说明。如需了解如何进行此项设置,请参阅设置初始状态。 |
showChartButtons | 布尔值 | true | false 会隐藏右上角用于控制图表类型(气泡 / 折线图 / 列)的按钮。 |
节目标题 | 布尔值 | true | false ,用于隐藏实体的标题标签(派生自数据表中第一列的标签)。 |
showSelectListComponent | 布尔值 | true | false 可隐藏可见实体的列表。 |
showSidePanel | 布尔值 | true | false 则隐藏右侧面板。 |
显示 X 指标选择器 | 布尔值 | true | false 会隐藏 x 的指标选择器。 |
显示 Y 指标选择器 | 布尔值 | true | false 则隐藏 y 的指标选择器。 |
showXScalePicker | 布尔值 | true | false 则隐藏 x 的缩放选择器。 |
显示 Y 比例选择器 | 布尔值 | true | false 则隐藏 y 的缩放选择器。 |
显示高级面板 | 布尔值 | true | false 会停用设置面板中的选项室。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 使用提供的选项绘制图表。 |
getState() |
字符串 | 返回动作图表的当前状态,已序列化为 JSON 字符串。如需将此状态分配给图表,请将此字符串分配给 draw() 方法中的 state 选项。它通常用于在启动时指定自定义图表状态,而不是使用默认状态。 |
事件
名称 | 说明 | 属性 |
---|---|---|
error |
尝试渲染图表出错时触发。 | id、message |
准备就绪 | 此图表已准备好进行外部方法调用。如果您希望与图表交互,并在绘制后调用方法,则应在调用绘制方法之前为该事件设置监听器,并且只能在事件触发后调用这些方法。 | 无 |
状态变化 | 用户以某种方式与图表进行了互动。调用 getState() 可了解图表的当前状态。 |
无 |
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。
说明
根据 Flash 安全设置,如果从浏览器的文件位置(如 file:///c:/webhost/myhost/myviz.html)而不是网络服务器网址(如 http://www.myhost.com/myviz.html)访问 Flash,则此类情况(以及所有基于 Flash 的可视化效果)可能无法正常运行。这通常只是一个测试问题。如 Macromedia 网站中所述,您可以解决此问题。