我可以使用 Iron-ajax 将数据加载到 polymer/highcharts 元素吗

Question

我正在尝试创建一个可以创建 Highchart 的聚合物元素。我无法在脚本标签中读取 ajaxResponse。我尝试将图表构造函数移动到模板中，但仍然无法正常工作，错误：Uncaught TypeError: Cannot read 属性 'type' of undefined

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>

<dom-module id="sales-chart">
    <template>

        <iron-ajax auto url="http://127.0.0.1:3412/2" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>

        <div id="container" style="max-width: 600px; height: 360px;"> HELLO <span>{{ajaxResponse.series}}</span></div>


        <script> 


            $("#container").highcharts({

            chart: {
            renderTo: 'container',
            type: 'spline'
            },
            title: {text:  'Company Sales '},
            series: [this.$.ajaxResponse]

        })

        </script>


    </template>

    <script>


        Polymer({
          is: "sales-chart",

        });

    </script>
</dom-module>

Answer 1

你一定可以！试一试：

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

<link href="../../iron-ajax/iron-ajax.html" rel="import">

<dom-module id="bar-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: "bar-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: 'bar',
            renderTo: 'container'
          },
          title: {text:  'HI'},
          xAxis: {
            categories: ['London', 'Paris', 'Madrid']
          },
          yAxis: {
            title: {
              text: 'Sales'
            }
          },
          series: [{
            name: 'Cities',
            data: data.series
          }]
        });
      }
    });
  </script>
</dom-module>

另一个提示：与其导入 jQuery 和带有 <script> 标签的 highcharts，您应该在组件目录中创建一个额外的 html 文件，用 <script> 加载它们标签，然后将该文件导入您的组件。这样，如果您的组件本身被多次导入，它就不会不必要地多次获取脚本。

Answer 2

使用 Highcharts-Chart 组件你可以简单地做到这一点：

<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">

<highcharts-chart type="bar" data="{{ajaxData}}" x-label="Cities"></highcharts-chart>
<iron-ajax auto url="http://127.0.0.1:3412/2" handle-as="json" last-response="{{ajaxData}}"></iron-ajax>

就这么简单！该组件本身会为您处理 jQuery 和 Highcharts 依赖项。

或

如果您希望插入数据的方式更加迂腐：

作为新数据流：

<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">

<highcharts-chart id="chart" type="bar" x-label="Cities"></highcharts-chart>
<iron-ajax auto url="http://127.0.0.1:3412/2" handle-as="json" on-response="handleAjax"></iron-ajax>

<script>
   app.handleAjax = function(e){app.$.chart.addData(e.detail.response.label,e.detail.response.height)}
</script>

作为要重新映射的新数据

<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">

<highcharts-chart id="chart" type="bar" x-label="Cities"></highcharts-chart>
<iron-ajax auto url="http://127.0.0.1:3412/2" handle-as="json" on-response="handleAjaxWithChange"></iron-ajax>
<script>
    app.handleAjaxWithChange = function(e){
        app.$.chart.setData(e.detail.response.forEach((el)=>{
            return [el.City+", "+el.State, el.count]
        }))
    }
</script>

还有更多例子here。

我可以使用 Iron-ajax 将数据加载到 polymer/highcharts 元素吗

Can I use Iron-ajax to load data to polymer/highcharts element

jquery

highcharts

polymer