Vue.js中折线图无法显示求助：柱状图可正常渲染

问题1：未注册折线图必需的Chart.js组件 #

你在linegraph.vue中注册了BarElement（用于柱状图），但折线图需要的是LineElement组件，缺少这个组件Chart.js无法渲染折线。

修复代码：
修改linegraph.vue中的ChartJS注册部分：

import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale)

问题2：图表数据未包含X轴标签 #

你的graphdata对象里没有包含labels字段，Chart.js需要这个字段生成X轴分类标签，缺少的话折线图无法正确渲染。

修复代码：
把定义好的labels数组放到graphdata对象内部：

graphdata: {
    labels: ['v','r','g','d','s','w','y'],
    datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
    }],
}

可选优化：样式ID不匹配 #

你的<style>块中定义了#lg1的样式，但组件里的折线图ID是lg2，如果需要给折线图应用样式，把样式选择器改成#lg2即可。

内容的提问来源于stack exchange，提问作者Jonas Fredriksson