Polymerjs Google图表 GoogleAnalytics|Polymerjs

【Polymerjs Google图表】聚合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 = 'http://www.srcmini.com/[["Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'

你可以在URL中传递数据

data = 'http://demo.com/chart-data.json'

你可以在Google DataTable对象中传递数据

data = 'http://www.srcmini.com/{{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 = "http://www.srcmini.com/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/google-chart/google-chart.html"> < /head> < body> < google-charttype = '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>