我试着用vue-chartjs创建一个堆叠条形图,但很遗憾我无法完成这项工作。我的vue-component代码现在看起来如下:第一个如何正确定义图表选项以获得堆叠条形图?提前感谢。
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 } ] } } } }
1条答案
按热度按时间6tdlim6h1#
您使用了错误的语法。您在使用V3时使用了V2语法。请注意,在V3中,所有秤都是它们自己的对象。有关更多信息,请阅读migration guide