Vue JS - Использование v-sparkline со списком объектов - PullRequest
0 голосов
/ 03 мая 2020

Я хочу иметь простой спарклайн в Vue JS. Но я не уверен, как я должен использовать параметры метки и значения в спарклайне. Мне нужен график, показывающий, сколько пользователей зарегистрировано по годам, поэтому у меня есть 2 поля "year" и "count" . Я не могу получить год и сосчитать напрямую ...

Sparkline;

<v-sparkline :value="countByYears.count" :labels="countByYears.year" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round" smooth>
</v-sparkline>

Данные;

data: () => ({
  countByYears: [
     {year : 2020, count : 50},
     {year : 2019, count : 32},
     {year : 2018, count : 51},
     {year : 2017, count : 16}
  ],
})

Есть ли способ получить год и считать объекты в списке объектов напрямую, не вычисляя их?

1 Ответ

0 голосов
/ 03 мая 2020

Я думаю, вам просто нужно вычислить два разных массива:

computed: {
 values() {
   return this.countForYears.map(x=>x.count);
 },
labels() {
  return this.countForYears.map(x=>x.year);
}
}

<v-sparkline :value="values" :labels="labels" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round" smooth>
</v-sparkline>

И использовать их для значений и меток реквизита на спарклайне.

Полный пример:

https://codepen.io/sbosell/pen/VwvrMPW?editors=1010

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