Chart és Graph példa

Forrás:

<template>
    <div>
        <canvas class="c" ref="cc"></canvas>
    </div>
</template>
<script>
import Chart from 'chart.js'
var gs = { }
var config = {
    type: 'line',
    data: {
        labels: [1,2,3,4,6,7,8],
        datasets: [{
            label: 'Adatok',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {}
}
export default {
    name: 'Diagram',
    mounted() {
        gs.cc = new Chart(
            this.$refs.cc.getContext('2d'),
            config
        )
    }
}
</script>
<style scoped>
div {
    text-align: center;
}
.c {
    box-shadow: 1px 1px 3px black;
}
</style>

Adatok dinamikus frissítése

Vis (opens new window)

Forrás:

<template>
  <div id="app">
    <button v-if="!rr" @click="add()">Cica</button>
    <br><br>
    <div class="c" ref="nw"></div>
  </div>
</template>
<script>
import vis from "vis-network";
var nodes = new vis.DataSet([
  { id: 1, label: "1. pont" },
  { id: 2, label: "2. pont" },
  { id: 3, label: "3. pont" },
  { id: 4, label: "4. pont" },
  { id: 5, label: "5. pont" }
])
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 2 }
])
var data = { nodes, edges }
export default {
  name: "App",
  data() {
    return { rr: false }
  },
  mounted() {
    new vis.Network(this.$refs.nw, data, {})
  },
  methods: {
    add() {
      nodes.add({ id: 6, label: "cica" })
      edges.add({ from: 3, to: 6 })
      edges.add({ from: 2, to: 6 })
      this.rr = true
    }
  }
}
</script>
<style scoped>
#app {
  text-align: center;
}
div.c {
  width: 720px;
  height: 400px;
}
</style>