首页 文章

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

提问于
浏览 次
0

我正在尝试创建一个创建Highchart的聚合物元素 . 我无法在脚本标记中读取ajaxResponse . 我试图在模板中移动图表构造函数但仍然无法正常工作，错误：未捕获TypeError：无法读取未定义的属性'type'

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>
jquery highcharts polymer

2 回答

  • 0

    你确定可以！放手一搏：

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

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

    回复于
  • 1

    使用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依赖项 .

    OR

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

    • 作为新数据流：
    <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 .

    回复于

相关问题