JavaScript >> Javascript 文檔 >  >> Vue.js

如何在 Vue 和 TypeScript 中使用 Chart.js

最近我在玩 Chart.js 庫並將其集成到我的一個 Vue 應用程序中。即使有一些包裝庫可以將 Chart.js 與 Vue 和 TypeScript 一起使用,我在將它們集成到我的 Vue 項目中時也遇到了問題。在這篇博文中,我想向您展示如何使用常規 Chart.js 庫在 Vue 中創建自己的圖表組件。

要求

  • Vue 項目
  • Vue 類組件
  • Vue 屬性裝飾器

安裝

首先,將以下包添加到您的 Vue 應用程序中。

$ yarn add chart.js @types/chart.js

安裝這些軟件包後,創建一個新的 charts 文件夾和組件目錄中的相應圖表組件。

$ mkdir src/components/charts
$ touch src/components/charts/Doughnut.vue

將以下內容添加到 Doughnut.vue 文件:

<template>
  <canvas id="doughnut" />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Chart from 'chart.js'

@Component
export default class Doughnut extends Vue {
  @Prop({ default: [] }) readonly labels!: Array<string>
  @Prop({ default: [] }) readonly colors!: Array<string>
  @Prop({ default: [] }) readonly data!: Array<number>
  @Prop({
    default: () => {
      return Chart.defaults.doughnut
    }
  })
  readonly options: object | undefined

  mounted() {
    this.createChart({
      datasets: [
        {
          data: this.data,
          backgroundColor: this.colors
        }
      ],
      labels: this.labels
    })
  }

  createChart(chartData: object) {
    const canvas = document.getElementById('doughnut') as HTMLCanvasElement
    const options = {
      type: 'doughnut',
      data: chartData,
      options: this.options
    }
    new Chart(canvas, options)
  }
}
</script>

如您所見,我們正在為圖表數據和配置聲明屬性。這使我們的組件可重用,並且我們能夠從另一個組件注入值。

現在,您可以導入和使用創建的 Doughnut 零件。在本例中,該組件已添加到新 Vue 項目的 Home 視圖中:

<template>
  <div class="home">
    <Doughnut
      :data="[25, 75, 30]"
      :labels="['Red', 'Green', 'Blue']"
      :colors="['red', 'green', 'blue']"
    />
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

最後啟動Vue開發服務器,在相關地址打開瀏覽器查看結果:


Tutorial JavaScript 教程
  1. 太空談話 - ReactJs

  2. Angular vs React vs Vue:js框架的最佳選擇?

  3. 如何使用 remark 和 ESLint 為 Markdown 和 MDX 創建自定義 lint 規則

  4. 使用 RxJS 在 React 中共享 UI 事件狀態

  5. 使用 WebSockets、PHP、MySQL 的 WhatsApp 克隆大師班:第 4 天

  6. Next.js 電子商務教程:快速購物車集成

  7. 如何通過 nuxt-property-decortor 在 Nuxt.js 應用程序中使用 mixins

  1. PBT 2021 的到來 - 第 19 天

  2. Javascript 得到一個沒有時間的日期 |顯示示例

  3. 國家管理展望

  4. 使用 Alpine.js 構建模塊化應用程序

  5. Web Components vs React:這不是關於 Web Components vs. React

  6. Simply Sneaker Bot with Playwright - 讓我們嘗試用懶惰的風格編寫一個簡單的機器人。

  7. Molsons 開發博客 - 簡介

  1. 更新到 Angulars HttpClient 以實現更簡單的 HTTP 調用等

  2. 寫字母 #3 分頁,紙飛機模式,評論!

  3. 何時使用 React Suspense 與 React Hooks

  4. 如何在 CSS 中使用操作系統樣式