Заполнение диаграммы рассеяния Vue Chart JS элементом объекта JSON из вызова ax ios - PullRequest
0 голосов
/ 16 апреля 2020

Я пытаюсь отразить vue -карту js точечного графика в laravel и создать точки на основе ответа json, полученного от вызова топора ios. Я хочу начать с того, что вызов ax ios возвращает объект JSON, подобный этому, с 313 записями:

{"0":{"att1":106620276,"arr2":"https://somesite.com/somelink/5846/106620276","att3":2,"att4":1 ...}}

Это код, который я использую, чтобы попытаться поместить его в график рассеяния.

<script>
     import { Scatter } from 'vue-chartjs'

     export default {
         extends: Scatter,
         name: "MyScatter",
         data: () => ({
             test: [],
             myobjs: []
         }),
         mounted() {

            this.getData(),

            this.renderChart({
                scales: {
                    yAxes: [{
                        ticks: {
                            stepSize: 10,
                            maxTicksLimit: 35
                        }
                    }]
                },
                datasets: [{
                    label: 'Scatter dataset 1',
                    fill: false,
                    borderColor: '#f87979',
                    backgroundColor: '#f87979',
                    data: this.myobjs
                }
                ]
            }, {responsive: true, maintainAspectRatio: false})
         },
         methods: {
            getData() {
                this.axios.get('/[my route]')
                .then(
                    response => { 

                    this.test = response.data;

                    let len = this.test.length;
                    console.log('data test:' + parseFloat(this.test[0].att3)) //works
                    console.log('props: ' + len); // works correctly returns 313

                    this.test.forEach(el => {
                        this.myobjs.push( { x: parseFloat(el.att3), y: parseFloat(el.att4) } );
                    });
                });
            }
         },
         computed: {

         }
     }

 </script>

 <style scoped>

 </style>

Я последовательно получаю следующее, с целой кучей точек, по-видимому, в (0, 0):

Scatter Plot

Как мне исправить это и правильно отобразить диаграмму?

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