Vue Highcharts отображает график для каждого пользователя после маршрутизации - PullRequest
Новая
       104

Vue Highcharts отображает график для каждого пользователя после маршрутизации

0 голосов
/ 09 июля 2020

Я использую Vue cli и Highcharts. У меня есть профиль пользователя, который отображает некоторую информацию о пользователе, например: 

<div class="top"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
  
       <div>  <p class="p"> {{ item.name }}</p> </div>

<div class="box" @click="route()">Rate</div>

, который отображает данные из массива в vuex: 

export default new Vuex.Store({
  state: {
  arrays: [
      {
         name: 'Bethany',
         rate: [60, 75, 70, 85, 65],
         Temp: [35, 37, 38, 26], 
      },
      {
         name: 'Sam',
         rate: [70, 95, 60, 65, 83],
         Temp: [36, 35.8, 37, 36]
      },
     ]

Я использую Highcharts для отображения скорость, Temp и маршрутизация к диаграммам с помощью функции маршрута. 

route: function () {   

     this.$router.replace({ name: "Charts" });    
},

Моя диаграмма выглядит так: 

 this.target = Highcharts.stockChart(this.$el, {
        Chart: {
                renderTo: 'container'
            },
        
       xAxis: [{
         format: '{value}',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    }],
    yAxis: [{
        labels: {
            format: '{value}',
        },
    }],
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
    },
    series: [ {
        name: 'Rate',
        type: 'spline',
        data: this.rate,
    }],

    });
  },

Прямо сейчас у меня есть только отображение таких данных: 

data : function() {
      return {
        target: undefined,
        rate: this.$store.state.arrays[0]['rate'],
      }
    },

Но мне нужен способ сделать это для всех ставок в массиве. Я ищу способ отображать данные серии для каждой оценки пользователей . Поэтому, когда я нажимаю на поле ставки Bethany, я попадаю на страницу диаграмм с данными ряда, отображающими ставки для Bethany.

Спасибо!

1 Ответ

1 голос
/ 09 июля 2020

Вы можете добавить имя текущего человека в качестве параметра запроса к вашему маршруту: 

route: function () {
    const name = "Bethany"; // TODO: use actual person name...
    this.$router.replace({ name: "Charts", query: { person: name } });    
},

Затем измените: 

this.$store.state.arrays[0]['rate'];

на что-то вроде: 

this.$store.state.arrays.find(x => x.name === this.$route.query.person).rate;
...