Polymer Шаблон Repeat За несколько диаграмм

Question

у меня есть элемент полимера 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" 
} 

И I получить диаграмму.

Но то, что я действительно хочу сделать, это перебрать массив данных диаграммы для создания нескольких диаграмм. Я очень старался понять, как работает шаблон, но я новичок как в 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" 
    } 
] 

Как перебрать, что для создания нескольких диаграмм с помощью шаблона повторения?

Answer 1

У меня нет решения для Highcharts, но Полимерный способ сделать это - декларировать мысли. Вам не нужен $.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> element.

Answer 2

Я не знаю много о Полимере, но из docs он выглядит как изменение <template> до <template repeat="{{ yourarray }}"> может стать решающим шагом в этом.

Answer 3

Я знаю, что это старый вопрос, но вот обновленный Полимерная 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/.