Chart with Axios?

Question

[asferot]

Как можно с помощью axios подставить данные в массив chart?
Вот что имеется

<template lang="pug">
include ../../../node_modules/bemto.pug/bemto.pug
- set_bemto_settings({ prefix: 'b-' })
    div
        +b.DIV.select-container-filial
            +b.SELECT.select-filials(v-model="selectedFilial")
                +e.OPTION.filial(value="" selected disabled hidden) Выберите филиал
                +e.OPTION.filial(v-for="filial in filials" v-bind:value="filial.f5001") {{filial.f5001}}
            +e.BUTTON(@click="reset()").clear Сброс
        line-chart(class="user_chart" :data="chartData" width="450px" height="270px" xtitle="Месяц" ytitle="Сумма" :legend="true" legend="right" :colors="['#4DB6AC', '#7986CB', '#81C784']")
</template>
<script>
require('./chart-zayavka.styl')
import axios from 'axios'
export default {
  data: function(){
      return{
          chartData:[
            {name: 'name', 
                data: {"Jan": 3745, "Feb": 4578, "Mar": 10785, "Apr": 5585, "May": 32533, "Jun": 77872, "Jul": 21455, "Aug": 52585, "Sep": 12588, "Oct": 22555, "Nov": 87585, "Dec":68522}},
            {name: 'name', 
                data: {"Jan": 42525, "Feb": 78278, "Mar": 10785, "Apr": 25827, "May": 74585, "Jun":78585, "Jul": 85282, "Aug": 25258, "Sep": 82828, "Oct": 25288, "Nov": 21582, "Dec":68522}},
            {name: 'name', 
                data: {"Jan": 44255, "Feb": 75278, "Mar": 10255, "Apr": 22877, "May": 15855, "Jun":88525, "Jul": 77852, "Aug": 25214, "Sep": 42258, "Oct": 25258, "Nov": 72142, "Dec":52788}},
            
        ],
        filials: [],
        selectedFilial:''
    }
   },
    mounted(){
            var CancelToken = axios.CancelToken;
            var source = CancelToken.source();
            axios.post('/filials', {
            _csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }).then(data => {
                this.filials = data.data;
            });
    },
    methods:{
        reset(){
            console.log('reset');
            this.selectedFilial = '';
        }
    }
}
</script>

Answer 1

[0xD34F]

Как можно с помощью axios подставить данные в массив chart?

Это в принципе невозможно, axios - для выполнения запросов, а не работы с массивами.

Разумеется, вы имели в виду кое-что другое, и даже понятно, что именно. Но учитывая фантастически ублюдочную формулировку вопроса, иного ответа вы не заслуживаете. Под ублюдочной формулировкой я имею в виду не только непонимание, о чём вы сами же и спрашиваете, но также и почти полное отсутствие какой-либо конкретики. А именно:

Не сказано ни слова о графике, что он отображает.

Получение данных для графика осуществляется будто бы с помощью axios - но единственный показанный запрос про другое, там идёт получение данных для выпадающего списка. То есть, должен быть ещё какой-то запрос. Какой? - url, параметры, структура ответа - ничего не известно.

Далее, "подставить данные" вы планируете в "массив chart" - но как следует из показанного огрызка кода, такого массива нет. Есть chartData. Это он? Или какой-то другой массив? Не знаю что и думать. Что до собственно "подставить" - у массивов есть метод push, неужели вы про него не слышали? Если не слышали - разговаривать тут не о чем, идите учить язык. А где-нибудь через полгодика, не раньше, можно будет и в сторону vue попробовать посмотреть. Если слышали - очевидно, сам по себе push проблемой быть не может, придётся констатировать, что о сути своих затруднений вы решили попросту умолчать.

Компонент line-chart, который, надо полагать, ответственен за построение графика - что это такое? Едва ли вы его написали сами - это или сторонний компонент, или обёртка над сторонним компонентом. Почему нет ссылки на документацию/github/...? - насколько я понял, график успешно строится, но надо динамически докидывать в него данные, так что сведения о компоненте графика пришлись бы очень кстати. Отслеживает ли он изменения своих параметров? Или может у него есть метод, позволяющий принудительно обновить свой внешний вид? Но нет - и тут никакой информации.

Вот так.

UPD. Вынесено из комментариев:

График строится библиотекой chartkick.js

есть запрос <...> необходимо подставить значения получаемых менеджеров в имена chartData. То есть в chartData:[{name:[сюда]}]

Понятно.

Не надо ничего "подставлять". Делаем отдельные свойства name и data, а chartData будет вычисляемым, причём собирать массив надо только в том случае, когда и name и data будут получены:

computed: {
  chartData() {
    const { names, data } = this;
    return names && data && data.map((n, i) => ({
      name: names[i],
      data: n,
    }));
  },
},

Соответственно, график создаётся только в том случае, если удалось собрать chartData:

<line-chart v-if="chartData" :data="chartData"></line-chart>

https://jsfiddle.net/t5dovxL4/

Comments

[asferot]

У меня есть chartData:[], который состоит из обязательных параметров внутри - это name и data. chartData:[{name:'name', data:''}]. есть запрос axios
axios.post('/managers', {
_csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}).then(data => {
this.chartData = data.data;
});
Мне необходимо подставить значения получаемых менеджеров в имена chartData. То есть в chartData:[{name:[сюда]}].

График строится библиотекой chartkick.js

line-chart это компонент графика.

Все, что есть в коде, который я выше указал, все что имеется.
Надеюсь так более понятно. Извиняюсь за формулировку, я не ярый специалист в этом.