最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Polymer Template Repeat Over Multiple Charts - Stack Overflow

programmeradmin4浏览0评论

I have a polymer highcharts element that works:

<script src=".8.2/jquery.min.js"></script>
<script src=".js"></script>
<script src="bower_ponents/platform/platform.js"></script>
<link rel="import" href="bower_ponents/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>

I pass it some nice data via the '2014 Mayor.json' file:

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

And I get a chart.

But what I really want to do is iterate over an array of chart data to produce multiple charts. I've tried very hard to figure out how template repeat works, but I'm new to both Polymer and javascript, and haven't been able to crack it.

Let's say my data file, 'arrayofdata.json' has the following in it:

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

How do I iterate over that to produce multiple charts using template repeat?

I have a polymer highcharts element that works:

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script src="bower_ponents/platform/platform.js"></script>
<link rel="import" href="bower_ponents/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>

I pass it some nice data via the '2014 Mayor.json' file:

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

And I get a chart.

But what I really want to do is iterate over an array of chart data to produce multiple charts. I've tried very hard to figure out how template repeat works, but I'm new to both Polymer and javascript, and haven't been able to crack it.

Let's say my data file, 'arrayofdata.json' has the following in it:

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

How do I iterate over that to produce multiple charts using template repeat?

Share Improve this question asked Sep 17, 2014 at 20:23 DonDon 8882 gold badges9 silver badges20 bronze badges 1
  • 1 could be of use... blog.polymer-project/howto/2014/09/11/… – saul.shanabrook Commented Sep 18, 2014 at 1:12
Add a ment  | 

3 Answers 3

Reset to default 7

I don't have a solution for Highcharts, but the Polymeric way to do this is to think declaratively. You don't need $.getJSON. You need an element like <google-chart>, that declaratively renders a chart from data and <core-ajax> for fetching the json data.

The whole element definition bees something like:

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

How wicked is that!? No code :)

The hardest part would be to get the data in the format google-chart expects. See <google-chart> element for examples.

I know it's an old question but here's the updated Polymeric 1.0/2.0 way of doing it, using Highcharts-Chart:

<link rel="import" href="bower_ponents/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>

And if you're looking for more examples you can check out http://avdaredevil.github.io/highcharts-chart/.

I don't know much about Polymer, but from the docs it looks like changing <template> to <template repeat="{{ yourarray }}"> might be the critical step in making this happen.

发布评论

评论列表(0)

  1. 暂无评论