Question

我的问题是我无法使条形图x轴从零开始。它可以很好地呈现数据，但是x轴从数据集中使用的最低数字开始。

我尝试以几种不同的方式传递选项。或者在fillData函数中包含选项...是否可能与我访问道具的方式有关？

<template>
  <div class="container-fluid">
    <h1> {{title}} </h1>
      <div>
        <div>
          <graph :chartData="fillData()"></graph>
        </div>
      </div>
  </div>
</template>

<style lang="scss">

  main {
    display: flex;
    & > * {
      width: 100%;
    }
  }

</style>

<script>
import Vue from 'vue'
import { Bar, mixins } from 'vue-chartjs'
import io from 'socket.io-client'
const socket = io('http://localhost:3000')
const { reactiveProp } = mixins

const Graph = Vue.component('bar-chart', {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    })
  }
})

export default {
  components: {
    Graph
  },
  asyncData (context, callback) {
    socket.emit('stats.init', (data) => {
      callback(null, data)
    })
  },
  methods: {
    fillData () {
      return {
        labels: this.labels(this.information),
        datasets: [
          {
            label: 'Your Requests',
            backgroundColor: '#f87979',
            data: this.numberOfRequests(this.information)
          }
        ],
      }
    },
    labels (y) {
      const list = y.map(x => x.text)
      const label = []

      list.forEach(function(x) {
        if (label.indexOf(x) === -1) {
          label.push(x)
        }
      })
      return label
    },
//how many times someone typed in a particular command
    numberOfRequests (y) {
      const list = y.map(x => x.text)
      const requests = []
      const label = this.labels(y)

      label.forEach(function(x) {
        let count = 0
        list.forEach(y => {
          if(y === x) {
            count++
          }
        })
        requests.push(count)
      })
      return requests
    }
  }
}

</script>

Answer 1

这是将x和y轴混合使用的愚蠢错误。已经回答了。

为什么条形图上的X轴不是从零开始？

1 个答案: