Polymer Ripetere Template sopra classifiche più

Question

ho un elemento Highcharts polimero che funziona:

<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> 

lo passo alcuni dati belle tramite file '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" 
} 

E io prendi un grafico

Ma quello che voglio veramente è iterare su una serie di dati del grafico per produrre più grafici. Ho provato molto a capire come funziona la ripetizione dei template, ma sono nuovo sia per Polymer che per javascript e non sono riuscito a risolverlo.

Diciamo che il mio file di dati, 'arrayofdata.json' ha il seguente in esso:

[ 
    { 
     "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" 
    } 
] 

Come posso iterare che per produrre più grafici utilizzando il modello di ripetizione?

Answer 1

Non ho una soluzione per Highcharts, ma il modo polimerico per farlo è pensare in modo dichiarativo. Non hai bisogno di $.getJSON. È necessario un elemento come <google-chart>, che rende in modo dichiarativo un grafico dai dati e <core-ajax> per il recupero dei dati JSON.

La definizione elemento intera diventa qualcosa di simile:

<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> 

Come malvagia è che !? Nessun codice :)

La parte più difficile sarebbe ottenere i dati nel formato previsto da google-chart. Vedi <google-chart> element per esempi.

Answer 2

Non so molto di Polymer, ma dal docs sembra che il passaggio da <template> a <template repeat="{{ yourarray }}"> potrebbe essere il passaggio fondamentale per far sì che ciò accada.

Answer 3

so che è una vecchia questione, ma qui è la versione aggiornata polimerici 1.0/2.0 modo di farlo, usando 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>

E se siete alla ricerca di altri esempi puoi dare un'occhiata allo http://avdaredevil.github.io/highcharts-chart/.