时间戳

首页 > 解决方案 > Vue JS -- 使用带有对象列表的 v-sparkline

vuejs2 - Vue JS -- 使用带有对象列表的 v-sparkline

问题描述

我想在 Vue JS 中有一个简单的迷你图。但我不确定我应该如何在迷你图中使用标签和值参数。我想要一个图表，显示按年份注册的用户数量，所以我有 2 个字段"year"和"count"。我不能直接计算年份...

迷你图；

<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}
  ],
})

有没有办法直接在对象列表中获取年份并计算对象而不计算它们？

标签： vuejs2vuetify.js

解决方案

我认为您只需要计算两个不同的数组：

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

推荐阅读