Vue.js和重新渲染图表

时间:2017-03-28 19:38:17

标签: javascript charts vue.js

所以我对使用Vue.js以及Charts.js完全不熟悉,所以如果答案显而易见,我很抱歉。

但是我有一个包含日期和随机值数据点的图表,我能够将这些数据放入我的图表并使用日期选择器我只会看到当天的所有数据,而图表会显示问题是它在装载时呈现的第一个仍然存在,如果我移动鼠标,它将在图表之间来回切换。

什么是解决上一个图表的解决方案,只保留新的图表?

<template>
  <div>
  <input v-on:input="selected()" type="date" ref="dayPicked"/>


  <canvas ref="canvas" style="width: 100%; height: 1000em"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js'
import numClicks from '../../data.json'

export default {
  data () {
    return {
      dataPoints: [],
      numOfClicks: []
    }
  },
  methods: {
    sorter: function () {
      numClicks.sort(function (a, b) {
        return (new Date(a[0]).getTime() - new Date(b[0]).getTime())
      })
      var dayTime = numClicks.map((daytime) => daytime[0])
      this.dataPoints = dayTime
      var click = numClicks.map((numClick) => numClick[1])
      this.numOfClicks = click
    },
    selected: function () {
        var datePart = this.$refs.dayPicked.value.match(/\d+/g),
        year = datePart[0].substring(0,4), // (0,4) get 4 digits for year
        month = datePart[1], day = datePart[2];
        var day = month+'-'+day+'-'+year
        var allDays = numClicks.filter((dayPicked) => dayPicked[0].match(day))
        var dayTime = allDays.map((daytime) => daytime[0])
        this.dataPoints = dayTime
        var click = allDays.map((numClick) => numClick[1])
        this.numOfClicks = click


        let canvas = this.$refs.canvas

        let chart = new Chart(canvas, {
          type: 'horizontalBar',
          data: {
            labels: this.dataPoints,
            datasets: [{
              label: '# of Votes',
              data: this.numOfClicks
            }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        })
      }
  },
  mounted() {
    this.sorter();
    let canvas = this.$refs.canvas

    let chart = new Chart(canvas, {
      type: 'horizontalBar',
      data: {
        labels: this.dataPoints,
        datasets: [{
          label: '# of Votes',
          data: this.numOfClicks
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    })
    console.log(chart)

  }
}
</script>

这是我第一次使用Vue和Charts,所以如果答案很明显我很抱歉,但我将不胜感激。

0 个答案:

没有答案