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>

我通过＆＃39; 2014 Mayor.json＆＃39;传递了一些不错的数据。文件：

{
    "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都不熟悉，并且还没有能够破解它。

让我们说出我的数据文件，＆＃39; arrayofdata.json＆＃39;有以下内容：

[
    {
        "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的解决方案，但是这样做的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> element。

Answer 2

我知道这是一个老问题，但是这里是使用Highcharts-Chart更新的 Polymeric 1.0 / 2.0 方式：

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

Answer 3

我对Polymer不太了解，但从docs开始，将<template>更改为<template repeat="{{ yourarray }}">可能是实现这一目标的关键步骤。

聚合物模板重复多个图表

3 个答案: