[英]Polymer Template Repeat Over Multiple Charts
我有一個聚合物highcharts元素工作:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="bar-chart" attributes="source">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer("bar-chart", {
ready: function() {
var options = {
chart: {type: 'bar', renderTo: this.$.container},
title: {text: ''},
subtitle: {text: ''},
xAxis: {categories: []},
yAxis: {title: {text: ''}},
plotOptions: {bar: {dataLabels: {enabled: true}}},
legend: {enabled: false},
credits: {enabled: false},
series: [{}]
};
$.getJSON(this.source).done(function(chartjson) {
options.xAxis.categories = chartjson.categories;
options.series[0].data = chartjson.series;
options.title.text = chartjson.title;
options.subtitle.text = chartjson.subtitle;
options.yAxis.title.text = chartjson.yAxistitle;
var chart = new Highcharts.Chart(options);
});
}
});
</script>
</polymer-element>
<bar-chart source="json/grass-roots/2014 Mayor.json"></bar-chart>
我通過'2014 Mayor.json'文件傳遞了一些不錯的數據:
{
"categories": ["Muriel E Bowser", "Tommy Wells", "Jack Evans", "Vincent C Gray", "David Catania", "Andy Shallal", "Reta Jo Lewis", "Carol Schwartz", "Vincent Orange", "Christian Carter", "Nestor DJonkam", "Bruce Majors", "Michael L Green"],
"series": [2505, 1654, 1332, 956, 699, 399, 183, 81, 72, 3, 3, 2, 1],
"title": "Mayor (2014)",
"subtitle": "Grassroots Contributors",
"yAxistitle": "Number of DC Residents Contributing to Candidate"
}
我得到一張圖表。
但我真正想做的是迭代一組圖表數據以生成多個圖表。 我已經非常努力地弄清楚模板重復是如何工作的,但我是Polymer和javascript的新手,並且無法破解它。
假設我的數據文件'arrayofdata.json'中包含以下內容:
[
{
"categories": ["Phil Mendelson", "Kris Hammond", "John C Cheeks"], "series": [172, 44, 4],
"title": "Council Chairman (2014)",
"subtitle": "Grassroots Contributors",
"yAxistitle": "Number of DC Residents Contributing to Candidate"
},
{
"categories": ["Muriel E Bowser", "Tommy Wells", "Jack Evans", "Vincent C Gray", "David Catania", "Andy Shallal", "Reta Jo Lewis", "Carol Schwartz", "Vincent Orange", "Christian Carter", "Nestor DJonkam", "Bruce Majors", "Michael L Green"],
"series": [2505, 1654, 1332, 956, 699, 399, 183, 81, 72, 3, 3, 2, 1],
"title": "Mayor (2014)",
"subtitle": "Grassroots Contributors",
"yAxistitle": "Number of DC Residents Contributing to Candidate"
}
]
如何使用模板重復迭代生成多個圖表?
我沒有Highcharts的解決方案,但是這樣做的Polymeric方法是以聲明的方式思考。 你不需要$.getJSON
。 您需要一個像<google-chart>
這樣的元素,它以聲明方式從數據中呈現圖表,而<core-ajax>
用於獲取json數據。
整個元素定義變得類似於:
<polymer-element name="bar-charts" attributes="source" noscript>
<template>
<core-ajax auto url="{{source}} response="{{items}}" handleAs="json"></core-ajax>
<template repeat="{{item in items}}">
<google-chart type='pie' height='300px' width='400px'
options='{{item.options}}' cols='{{item.cols}}'
rows='{{item.rows}}' data='{{item.data}}'>
</google-chart>
</template>
</template>
</polymer-element>
那是多么邪惡!? 沒有代碼:)
最困難的部分是以谷歌圖表期望的格式獲取數據。 有關示例,請參閱<google-chart>
元素 。
我知道這是一個古老的問題,但這里是更新的Polymeric 1.0 / 2.0方式,使用Highcharts-Chart :
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html"> <template is="dom-bind" id="app"> <template is="dom-repeat" items="{{dynamicChartData}}" as="e"> <highcharts-chart index$="[[index]]" type="pie" data="[[zip(e.categories,e.series)]]" title="[[e.title]]" subtitle="[[e.subtitle]]" y-label="[[e.yAxistitle]]"></highcharts-chart> </template> <iron-ajax auto url="{{source}}" last-response="{{dynamicChartData}}" handle-as="json"></iron-ajax> </template> <script> var app = document.querySelector("#app") app.source = "Your URL-------------------" app.zip = function(a,b) { return a.map(function (_, i) {return [a[i], b[i]]}) } </script>
如果您正在尋找更多示例,可以查看http://avdaredevil.github.io/highcharts-chart/ 。
我對Polymer不太了解,但是從文檔 <template repeat="{{ yourarray }}">
將<template>
更改為<template repeat="{{ yourarray }}">
可能是實現這一目標的關鍵步驟。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.