如何在 vis.js 时间轴中显示来自 firebase 的数据答案

【问题标题】：How to display data from firebase in vis.js timeline如何在 vis.js 时间轴中显示来自 firebase 的数据
【发布时间】：2022-01-08 03:21:04
【问题描述】：

我正在使用 vis.js 时间线，我想显示来自 firestore 的日期。当我手动输入时它可以工作（查看-> this.items），但不适用于firestore（查看-> this.users）。我正在使用 Vue 框架。

<script>
export default {
  data() {
    return {
      users: [],
      items: [
        {
          id: '1',
          content: 'London',
          group: 'Mike',
          start: '2021-12-20',
          end: '2022-06-19',
        },
      ],
    }
  },
  async fetch() {
    await this.loadPlaces()
  },
  methods: {
    async loadPlaces() {
      const querySnapshot = await getDocs(collection(db, 'places'))

      querySnapshot.forEach((doc) => {
        this.users.push({ id: doc.id, ...doc.data() })
      })

      this.$store.commit('places/setPlaces', this.users)
    },
  },
  computed: {
    places() {
      return this.$store.state.places.places
    },
  },
  mounted() {
    let container = document.getElementById('visualization')

    let options = {
      moveable: true,
    }

    let timeline = new vis.Timeline(container)
    timeline.setOptions(options)
    timeline.setGroups(this.groups)
    timeline.setItems(this.items)
  },
}
</script>

【问题讨论】：

标签： firebase vue.js google-cloud-firestore nuxt.js vis.js

【解决方案1】：

我找到了解决办法。
我刚刚将所有代码从mounted() 移到方法loadPlaces（在this.$store.commit 下）

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

省去麻烦，改用 vis 数据集。

我在 vue 3 中的 pinia store 是这样的。


import { defineStore } from 'pinia'
import { DataSet } from 'vis-data/esnext'


export const useVisData = defineStore('visData', {
    state: () => ({
        items: new DataSet([]),
        groups: new DataSet([]),
        selectedItems: [],
        serializedGroupsAndItems: []

    }),
    actions: {

        //Group actions

        showAllGroups() {
            this.groups.forEach(group => {
                this.groups.updateOnly({ id: group.id, visible: true })
            });
        },
        addGroup(group) {
            this.groups.add(group)
        },
        hideGroup(group) {
            this.groups.updateOnly({ id: group, visible: false })
        },

        //Item actions

        addItem(item) {
            this.items.add(item)
        },
        removeItem(item) {
            this.items.remove(item)
        },
        setSelectedItems(items) {
            this.selectedItems = items
        },

        //data add/remove

        serializeData() {
            this.serializedGroupsAndItems.push({
                groups: JSON.stringify(this.groups.get()),
                items: JSON.stringify(this.items.get())
            })
        },
        loadSerializedData() {
            this.clearGroupsAndItems()
            
            this.serializedGroupsAndItems.forEach(data => {
                this.addGroup(JSON.parse([data.groups]))
                this.addItem(JSON.parse([data.items]))
            })
        },

        //misc

        clearGroupsAndItems() {
            this.groups.clear()
            this.items.clear()
        }

    },
    getters: {
        getHiddenGroups(state) {
            return state.groups.get({
                filter: (item) => {
                    return item.visible === false
                }
            })
        }
    }

})

还记得留意选项的变化。

将它包装在 vue 组件中可能会更好。像这样的东西。这就是我所做的。

let timeline;
const visref = ref(null);

onMounted(async () => {
    timeline = new Timeline(visref.value, props.items, props.groups, {...props.options, ...timelineOptions});

    props.events.forEach(event => {
        on(event, (properties) => {
            // console.log(event, properties)
            emits(`vis${event}`, properties);
        });
    });

})

<template>
    <div ref="visref"></div>
</template>

那么你可以像这样使用它：


const timelineref = ref();

      <Timeline
        ref="timelineref"
        :items="visStore.items"
        :groups="visStore.groups"
        :options="options"
      />

记得在时间轴组件中公开实例，然后你可以使用这样的 ref 调用函数。


timelineref.value.timeline.zoomOut(0.5)

【讨论】：