堆叠条形图不工作- vuechart.js

bakd9h0s  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(144)

我试着用vue-chartjs创建一个堆叠条形图,但很遗憾我无法完成这项工作。我的vue-component代码现在看起来如下:
第一个
如何正确定义图表选项以获得堆叠条形图?提前感谢。

6tdlim6h

6tdlim6h1#

您使用了错误的语法。您在使用V3时使用了V2语法。请注意,在V3中,所有秤都是它们自己的对象。有关更多信息,请阅读migration guide

import {
  Bar
} from 'vue-chartjs'
import {
  Chart,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'

Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChartStacked',
  components: {
    Bar
  },
  props: {
    chartInput: Object,
    chartHeight: Number,
    barColour: String
  },
  data() {
    return {
      chartOptions: {
        responsive: true,
        scales: {
          x: {
            stacked: true
          },
          y: {
            stacked: true
          }
        }
      }
    }
  },
  computed: {
    chartData() {
      return {
        labels: this.chartInput.map(d => d.x),
        datasets: [{
            data: this.chartInput.map(d => d.y1),
            backgroundColor: this.barColour
          },
          {
            data: this.chartInput.map(d => d.y2),
            backgroundColor: this.barColour
          }
        ]
      }
    }
  }
}

相关问题