未呈现 Primevue 图表

Question

我坚持从 Primevue 组件渲染图表。它基于 chart.js 库。此时我已经创建了简单的 vue 组件：

<template>
  <div class="p-chart">
    <h2>Chart:</h2>
    <chart type="line" :data="chartData" />
  </div>
</template>

<script>

import Chart from "primevue/chart";

export default {
  data() {
    return {
      chartData: {
        labels: ["Label"],
        datasets: [
          {
            label: "Dataset",
            backgroundColor: "#5F5F5F",
            data: [99],
          },
        ],
      },
    };
  },
  components: {
    Chart,
  },
};
</script>

不幸的是，图表没有出现，而且我在 brwoser 控制台中没有看到任何 js 错误。有人可以帮助我在这里缺少什么吗？需要任何其他设置吗？

Answer 1

根据 https://www.primefaces.org/primevue/showcase/#/chart/line

上的文档

我认为您缺少图表标记内的选项属性：

<chart type="line" :data="chartData" :options="chartOptions" />

并把对象放在数据里面return from vue export:

data() {
    return {
      chartData: {
        labels: ["Label"],
        datasets: [
          {
            label: "Dataset",
            backgroundColor: "#5F5F5F",
            data: [99],
          },
        ],
      },
      chartOptions: {
        plugins: {
          legend: {
            labels: {
              color: '#495057'
            }
          }
        },
        scales: {
          x: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          },
          y: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          }
        }
      }
    };

Answer 2

删除 chart.js 然后安装这个版本，对我有用（但我使用 vue 3，也许你需要另一个版本）：

npm i chart.js@2.9.4

未呈现 Primevue 图表

Primevue Chart not rendered

javascript

vue.js

chart.js

primevue