Vue.js对Chart.js的包装器

Chart.js的一个Vue.js包装器，帮助你为你的Vuejs应用程序创建可重复使用的图表。

如何使用它。

1.导入一个你选择的图表类型。

• 酒吧
• 甜甜圈
• 线形图
• 饼图
• 极地面积
• 雷达
• 气泡
• 散点

import { Line } from 'vue-chartjs'

2.创建你的组件。

export default {
  extends: Line,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}

3.3.将你的图表组件添加到一个父组件中。

<line-chart :chartdata="chartData" :options="chartOptions"/>

4.所有可用的道具。

chartData: {
  type: Object,
  required: true
},
datasetIdKey: {
  type: String,
  default: 'label'
},
chartOptions: {
  type: Object,
  default: () => {}
},
chartId: {
  type: String,
  default: chartId
},
width: {
  type: Number,
  default: 400
},
height: {
  type: Number,
  default: 400
},
cssClasses: {
  type: String,
  default: ''
},
styles: {
  type: Object,
  default: () => {}
},
plugins: {
  type: Object,
  default: () => {}
}

预览。

更改日志。

v4.1.2 (09/27/2022)

• 修复了遗留的多个注释

v4.1.1 (05/27/2022)

• 修复错误

v4.1.0 (05/10/2022)

• 为选项添加反应性
• 遗留图表：为遗留图表添加类型定义

v4.0.6 (04/21/2022)

• 错误修复

v4.0.5 (04/08/2022)

• 遗留图表：修复在一个页面呈现多个图表的问题

v4.0.4 (04/01/2022)

• 改变传统图表实例类型

v4.0.3 (03/29/2022)

• 修复图表插件类型

v4.0.2 (03/28/2022)

• 遗留图表：为遗留图表添加错过的导出功能 generateChart函数

v4.0.1 (03/25/2022)

• 支持chart.js 3.0
• 迁移到vue3
• 支持typescript
• vue2遗留问题支持

v3.5.1 (03/23/2022)

• 特技：支持chart.js 3.0
• 特技：支持vue2遗留问题

The postVue.js Wrapper For Chart.jsappeared first onVue Script.