问题

我将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();
  }
});

我从this blog得到了这个想法，我正在努力使其适应更多的图表。

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

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

Answer 1

解决方案

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

修复：

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

因此，这就是将Highchart.js渲染到组件中的方式：）

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

问题

1 个答案:

解决方案