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

解决方案

highchart中的series属性应该是一个对象数组。但是我错误地只定义了一个对象:

解决办法:

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

---

所以，这就是你如何渲染Highchart.js到一个组件:)