पॉलिमर खाका दोहराएँ एकाधिक चार्ट

Question

मैं एक बहुलक Highcharts तत्व यह है कि काम करता है से अधिक:

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

और मैं:

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

मैं उस पर कैसे पुनरावृति टेम्पलेट दोहराने का उपयोग कर एक से अधिक चार्ट निर्माण करने के लिए है:

के अपने डेटा फ़ाइल, 'arrayofdata.json' मान लीजिए उस में निम्नलिखित है?

Answer 1

मेरे पास हाईचार्ट्स का समाधान नहीं है, लेकिन ऐसा करने के लिए पॉलिमरिक तरीका घोषणात्मक रूप से सोचना है। आपको $.getJSON की आवश्यकता नहीं है। आपको <google-chart> जैसे तत्व की आवश्यकता है, जो जेसन डेटा लाने के लिए डेटा से <core-ajax> को चार्ट से प्रस्तुत करता है।

<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- चार्ट प्रारूप में डेटा प्राप्त करना सबसे कठिन हिस्सा होगा। उदाहरण के लिए <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/ देख सकते हैं।