typescript - 如何在 nuxt.js 中使用 chart.js？

Question

我做了一个小应用程序来确认如何在 Nuxt.js 中使用 chart.js。我最近项目的语言是 TypeScript，所以我尝试用 Typescript 编写代码。我也使用 Nuxt.js 作为框架。我提到了这个网站。 但是我的示例代码发生了错误。

首先，我将图表文件制作为 .vue 文件。我的图表组件在 Nuxt.js 中创建了组件目录。但在这段代码中，@Prop 发生了错误。错误消息和代码如下。

“属性‘chartData’没有初始化器，也没有在构造函数中明确分配。”

    <script lang="ts">
import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator";
import Chart from "chart.js";
import VueChart from "vue-chartjs";
const Line = VueChart.Line;
const reactiveProp = VueChart.mixins.reactiveProp;

@Component
export default class ChartLine extends mixins(Line, reactiveProp) {
  @Prop({ default: {} }) chartData: Chart.ChartData;
  @Prop({ default: {} }) options: Chart.ChartOptions;

  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}
</script>

在 Nuxt.js 的页面中，我制作了 chart.js 文件作为显示图表。所以，我的代码在下面

    <template>
  <div class="chart-container">
    <ChartLine
      :chartData="chartData"
      :options="chartOption"
      :styles="chartStyles"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { ChartData, ChartOptions } from 'chart.js'
import ChartLine from '~/components/ChartLine.vue'

@Component({ components: { ChartLine } })
export default class ChartPage extends Vue {
  private chartData: ChartData = {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [
      {
        label: 'Data One',
        data: [1, 5, 3, 4, 3],
      },
      {
        label: 'Data Two',
        data: [10, 50, 30, 40, 30],
      },
    ],
  }
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
  }

  private chartStyles = {
    height: '100%',
    width: '100%',
  }
}
</script>

<style lang="scss">
.chart-container {
  position: relative;
  height: 40vh;
  width: 80vw;
  margin: 0 auto;
}
</style>

我真的不明白如何解决这些错误。谁能给我建议？

标签： typescriptvue.jschart.jsnuxt.jsvuetify.js