Dynami c Chart JS изменение не работает для объекта наблюдателя - PullRequest
Новая
       27

Dynami c Chart JS изменение не работает для объекта наблюдателя

0 голосов
/ 29 января 2020

Я использовал vue-chartjs и rxjs observer в приложении. Динамическое изменение chartData не работает, когда данные добавляются в канал подписки с вложенным объектом . Но он работал в одной объектной переменной.

Диаграмма JS

export default {
  extends: Chart.Line,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted() {
    this.renderLineChart();
  },
  methods: {
    renderLineChart: function() {
      this.renderChart(this.chartData,
        Object.assign({}, generalOptions, this.options)
      )
    }
  }
}

Main. vue

<div v-for="b in allCharts">
  <div v-for="t in b.charts">
   <line-chart
    :width="720"
    :height="250"
    :chart-data="t.data"
    :options="lineChartOptions()"
   />
 </div>
</div>

Случай № 1: один объект (обработан) 

private sampleData :any = {
  labels: [],
  datasets: []
}

chart$.subscribe(data => {
   this.allCharts[0].charts.map((channel, index) => {
     this.sampleData = _.cloneDeep(channel.data);
   });
})

Случай № 2: вложенный объект (не работает) 

private allCharts: any = [
  {
    name: "chart1",
    charts: [{
      channels: "channel1",
      data: {
       labels: [],
       datasets: []
      }
    }]
  },
  ...
]

chart$.subscribe(data => {
   this.allCharts[0].charts.map((channel, index) => {
     this.$set(this.allCharts[0].charts[0].data, "labels", _.cloneDeep(channel.data.labels))
     this.$set(this.allCharts[0].charts[0].data, "datasets", _.cloneDeep(channel.data.datasets))
   });
})

Проблема

Почему Случай 2 ничего не показывает (Предположим, что наборы данных и метки обновляются при подписке)

...