javascript - 我可以将iron-localstorage 和iron-ajax 与highcharts 一起使用吗

Question

我有一个 polymer 元素，它使用iron-ajax来创建一个 Highcharts 。我现在可以合并iron-localstorage，以便图表将从ls中的数据渲染，除非ls为空，在这种情况下它将调用iron-ajax从api加载数据？

我的工作元素如下:

    <dom-module id="sales-chart">
  <template>
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax>
    <div id="container" style="max-width: 600px; height: 360px;"></div>
  </template>

  <script>
    Polymer({
      is: "sales-chart",

      properties: {
        url: String,
        data: Object
      },

      observers: [
        // These functions only run once the observed properties contain
        // something other than undefined.
        '_requestData(url)',
        '_chartData(data)'
      ],

      _requestData: function(url) {
        // Note: Use `generateRequest()` instead of the `auto` property
        // because `url` may not be available when your element is
        // first created.
        this.$.ajax.generateRequest();
      },

      _chartData: function (data) {
        $(this.$.container).highcharts({
          chart: {
            type: 'spline',
            renderTo: 'container'
          },

          series: [{

            data: (data.series)
          }]
        }); 


      }
    });
  </script>
</dom-module>

Answer 1

按照这些思路应该可以工作(没有经过严格测试):

<dom-module id="sales-chart">
  <template>
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax>
    <div id="container" style="max-width: 600px; height: 360px;"></div>
    <iron-localstorage name="{{url}}"
        value="{{data}}"
        on-iron-localstorage-load-empty="_requestData">
    </iron-localstorage>
  </template>

  <script>
    Polymer({
      is: "sales-chart",

      properties: {
        url: String,
        data: Object
      },

      observers: [
        // These functions only run once the observed properties contain
        // something other than undefined.
        '_chartData(data)'
      ],

      _requestData: function() {
        // Note: Use `generateRequest()` instead of the `auto` property
        // because `url` may not be available when your element is
        // first created.
        this.$.ajax.generateRequest();
      },

      _chartData: function (data) {
        $(this.$.container).highcharts({
          chart: {
            type: 'spline',
            renderTo: 'container'
          },

          series: [{

            data: (data.series)
          }]
        }); 


      }
    });
  </script>
</dom-module>