无法构建堆叠的 Vue-ChartJS 线图

Question

我正在尝试使用 Vue-ChartJS 制作堆叠折线图，但在堆叠时遇到了困难。

我尝试将以下内容添加到填充数据函数中，但没有发现任何变化。

scales: {
    yAxes: [{ stacked: true}]   
}

我也尝试创建一个 this.options 条目，但这也不起作用。图表的最小可重现代码如下，任何建议或帮助将不胜感激！

## LineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

## LineChart.vue
<template>
  <div class="small">
    <line-chart :chart-data="chartData"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
import LineChart from '../store/LineChart.js'

export default {
  components: {
    LineChart
  },
  data() {
    return {
      chartData: null
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData() {
      this.chartData = {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [this.getRandomInt(), this.getRandomInt()]
          },
          {
            label: 'Data Two',
            backgroundColor: '#C23596',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

Answer 1

您需要在选项中传递scales：

...

<div class="small">
  <line-chart :chart-data="chartData" :options="options"></line-chart>
  <button @click="fillData()">Randomize</button>
</div>

...

data() {
  return {
    chartData: null,
    options: {
      scales: {
        yAxes: [
          {
            stacked: true
          }
        ]   
      },
    },
  }
},