srcmini聚合Google图表是一个包含用于可视化数据的图表的元素.Google图表包含各种图表, 例如饼图, 折线图, 柱形图, 面积图, 树形图等。
你可以在Google图表元素中将高度和宽度定义为样式属性。
google-chart {
height: 100px;
width: 300px;
}有很多方法可以将数据提供为JSON格式的属性。
使用cols和rows属性：
cols = '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows = '[["Oct", 31], ["Nov", 30], ["Dec", 31]]'使用数据属性：
- 你可以直接传递数据
data = '[["Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'- 你可以在URL中传递数据
data = 'http://demo.com/chart-data.json'- 你可以在Google DataTable对象中传递数据
data = '{{dataTable}}'- 使用视图属性：
view = '{{dataView}}'运行以下命令以在你的项目目录中安装google chart元素。之后, 你可以在应用程序中使用此元素：
bower install PolymerElements/google-chart --save例：
创建一个index.html文件并在其中添加以下代码, 以查看Polymer.js中google-chartelement的用法。
<!DOCTYPE html>
<html>
<head>
<title>google-chart</title>
<base href = "http://polygit.org/components/">
<script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel = "import" href = "google-chart/google-chart.html">
</head>
<body>
<google-chart
type = 'pie'
options = '{"title": "Pie Chart", "vAxis": {"minValue" : 0, "maxValue": 8}}'
cols = '[{"label": "Country", "type": "string"}, {"label": "Value", "type": "number"}]'
rows = '[["Germany", 5.0], ["US", 4.0], ["Africa", 11.0], ["France", 4.0]]'>
</google-chart>
</body>
</html>
评论前必须登录！
注册