options.scales.yAxes [0] .ticks.callback не обновляется динамически в ember-cli-chart - PullRequest
Новая
       20

options.scales.yAxes [0] .ticks.callback не обновляется динамически в ember-cli-chart

2 голосов
/ 21 мая 2019

Я вложил ember-cli-chart в мой hbs файл как 

<div class="chart">
    {{ember-chart type='line' data=data options=options}}
</div>

В моем файле компонента я создал свойство options как 

options: computed('metric', function() {
  let opts = defaultOptions;
  if (this.metric === 'height') {
     opts.scales.yAxes = [{
         ticks: {
             callback: function(value, index, values) {
              // code to return labels
             }
        }
     }]
  } else {
     opts.scales.yAxes = [{
         ticks: {
             callback: function(item, index, items) {
                 // code to return labels
             }
        }
     }]
  }

  return opts;
});

Я хочу отображать метки оси Y на основе текущей выбранной метрики.Когда загружается первая временная диаграмма, она отображает правильные метки на оси ординат, а если я изменяю метрику, то используется тот же самый обратный вызов вместо другого (в другой части) и отображает те же метки, но с обновленными значениями данных.Кто-нибудь может помочь с этим?

1 Ответ

0 голосов
/ 21 мая 2019

Хммм, я не знаю аддона или chart.js по этому вопросу, но, глядя на исходный код компонента ember-chart , я вижу 

didUpdateAttrs() {
    this._super(...arguments);
    this.updateChart();
},

updateChart() {
    let chart   = this.get('chart');
    let data    = this.get('data');
    let options = this.get('options');
    let animate = this.get('animate');

    if (chart) {
        chart.config.data = data;
        chart.config.options = options;
        if (animate) {
            chart.update();
        } else {
            chart.update(0);
        }
    }
}

Таким образом, для обновления chart.js вам нужно запустить didUpdateAttrs, что в данном случае означает, что само options должно измениться.Я не знаю, как вы создаете defaultOptions, но если предположить, что эта ссылка никогда не изменится, нет причины, по которой didUpdateAttrs сработает, поскольку вы не меняете ссылку на options (вы меняете только дочерние реквизитыdefaultOptions в расчете).Я бы предположил, что: 

import { assign } from '@ember/polyfills';
...
options: computed('metric', function() {
  let opts = assign({}, defaultOptions);
  if (this.metric === 'height') {
     opts.scales.yAxes = [{
         ticks: {
             callback: function(value, index, values) {
              // code to return labels
             }
        }
     }]
  } else {
     opts.scales.yAxes = [{
         ticks: {
             callback: function(item, index, items) {
                 // code to return labels
             }
        }
     }]
  }

  return opts;
})

будет достаточно для запуска желаемого поведения, поскольку мы всегда возвращаем новый объект, когда происходит повторное вычисление options.

...