Ember JS:将Highcharts.js变成一个组件

Question

2016年3月17日更新,以更好地反映EmberJS v1.13.0及更高版本的当前最佳实践.

---

问题

我将Highcharts渲染成一个组件,我几乎让它工作,但是属性到组件的绑定在某处丢失了.

这就是我调用组件的方式:

//templates/index.hbs
{{pie-chart data=pieData}}

这是data属性的样子(当前在控制器中设置):

//controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({
  init() {
    this._super(...arguments);
    this.pieData = [
      ['0 - 30', 2.5],
      ['31 - 60', 7.5],
      ['61 - 90', 12.5],
      ['91 - 120', 77.5]
    ];
   }
});

这是组件逻辑:

//components/pie-chart.js
import Ember from 'ember';

export default Ember.Component.extend({

  classNames: ['chart'],

  renderChart() {
    return this.$().highcharts({
      chart: {
        height: 275
      },
      title: null,
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: false
          }
        }
      },
      series: {
        type: 'pie',
        data: this.get('data')
      },
      colors: ['#777777', '#888888', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee'],
      credits: {
        enabled: true
      }
    });
  },

  didUpdateAttrs() {
    let chart = this.$().highcharts();
    let series = this.get('data');
    chart.series[0].setData(series);
  },

  didInsertElement() {
    this._super(...arguments);
    this.renderChart();
  },

  willDestroyElement() {
    this.$().highcharts().destroy();
  }
});

我从这个博客得到了这个想法,我正在尝试调整它以制作更多的图表.

图表呈现在屏幕上,但它是空白的...没有错误报告...我唯一可以想到的是data,为了绘制图形,没有正确处理属性？

我不确定这是我错误使用Ember代码,还是错误使用Highcharts代码？

Answer 1

解

series里面的属性highchart应该是一个对象数组..但我错误地定义了一个对象:

修复:

series: [{
    type: 'pie',
    data: this.get('data')
}],

那么,这就是你如何将Highchart.js渲染成一个组件:)