简介

vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人。它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大的灵活性。github start 3k+, MIT协议。

DEMO 列表

条形图

折线图

圆图

饼图

雷达图

极地图

气泡图

线图

快速上手

• 安装

你可以在 npm 下安装 vue-chartjs. 当然, 你也需要在项目中安装 chart.js 依赖. 因为 Chart.js是一个 peerDependency. 这种方式你可以完全控制 Chart.js 的版本

yarn add vue-chartjs chart.js 
or 
npm install vue-chartjs chart.js --save

• 安装vue 1.x版本

如果你使用的是 vue 1.x 版本, 请使用 legacy 标签. 然而, Vue 1 所支持的版本不再维护了.

yarn add vue-chartjs@legacy
or
npm install vue-chartjs@legacy

• 浏览器

你也可以直接在浏览器中使用 vue-chartjs. 先添加 Chart.js 脚本, 再添加 vue-chartjs 脚本.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

• 创建你自己的第一个图表

你需要引入一个基本图表然后扩展它. 这为处理不同数据时提供了更大的灵活性. 你可以封装你的组件以及使用props来处理数据, 或者你可以直接在组件里输入他们. 当然, 如果那样做, 你的组件就无法复用了.

你可以引入整个项目或者每个模块单独引用. 之后你需要使用extends:或者 mixins:[]. 然后在 mounted() 中调用 this.renderChart(). 这将创建你的图表实例.

import { Bar } from 'vue-chartjs'
export default {
 extends: Bar,
 mounted () {
 this.renderChart(data, options)
 }
}

你可以使用 extends: Bar 或者 mixins: [Bar]

this.renderChart() 方法由 Bar 组件提供, 接收两个对象参数.第一个是你的图表数据, 第二个是配置对象.

在这个文档中查看你需要提供的对象结构 Chart.js docs .

• Vue 单文件组件

文档中很多例子都是基于javascript文件 而不是 .vue 文件. 这是因为你大多数只需要<script>.当然在 .vue 文件中你也能用的很好.

Chart.vue

<script>
import { Line } from 'vue-chartjs'
export default {
 extends: Line,
 props: ['chartdata', 'options'],
 mounted () {
 this.renderChart(this.chartdata, this.options)
 }
}
</script>
<style>
</style>

不要使用Template标签

不要在你的 .vue 文件中引入 <template> 标签. Vue 无法 合并模板.如果你添加了一个空的 <template> 标签, Vue 将会从你的主键里获取模板, 而不会从你 extend 中获取, 这将导致页面为空并报错.

• 更新 Charts

如果你修改了数据集, Chart.js 是不会提供实时更新的. 当然, vue-chartjs 提供了两个 mixins 来实现.

• reactiveProp
• reactiveData

这两个mixins其实实现的是相同的功能. 大多数时间你将会使用reactiveProp. 它扩展了图表组件的逻辑, 并自动创建名为 chartData 的props参数, 并为这个参数添加vue watch. 当数据改变, 如果数据在数据集中改变, 它将调用update(); 如果添加了新的数据集, 它将调用renderChart().

reactiveData 创建一个本地的chartData变量, 不是props参数! 以及创建一个对这个变量的 watcher. 如果你需要单一目的的图表, 以及在图表组件中进行API调用的时候, 这将非常有用.

• 更新 Charts => 例子

LineChart.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
 extends: Line,
 mixins: [reactiveProp],
 props: ['options'],
 mounted () {
 // this.chartData 在 mixin 创建.
 // 如果你需要替换 options , 请创建本地的 options 对象
 this.renderChart(this.chartData, this.options)
 }
}

RandomChart.vue

<template>
 <div class="small">
 <line-chart :chart-data="datacollection"></line-chart>
 <button @click="fillData()">Randomize</button>
 </div>
</template>
<script>
 import LineChart from './LineChart.js'
 export default {
 components: {
 LineChart
 },
 data () {
 return {
 datacollection: null
 }
 },
 mounted () {
 this.fillData()
 },
 methods: {
 fillData () {
 this.datacollection = {
 labels: [this.getRandomInt(), this.getRandomInt()],
 datasets: [
 {
 label: 'Data One',
 backgroundColor: '#f87979',
 data: [this.getRandomInt(), this.getRandomInt()]
 }, {
 label: 'Data One',
 backgroundColor: '#f87979',
 data: [this.getRandomInt(), this.getRandomInt()]
 }
 ]
 }
 },
 getRandomInt () {
 return Math.floor(Math.random() * (50 - 5 + 1)) + 5
 }
 }
 }
</script>
<style>
 .small {
 max-width: 600px;
 margin: 150px auto;
 }
</style>

限制:Caveats Change-Detection-Caveats vm.$watch

• 事件

如果你的数据改变, 响应式的 mixins 将会触发事件. 你能监听他们通过在图表组件上使用 v:on. 下列是可用的事件:

• chart:render - 如果 mixin 执行完全重绘
• chart:destroy - 如果 mixin 删除图表对象实例
• chart:update - 如果 mixin 执行更新而不是重绘
• labels:update - 如果设置了新的labels
• xlabels:update 如果设置了新的xLabels
• ylabels:update - 如果设置了新的yLabels
• 故障排查

响应式系统, 它当前状态是不健全的. 你将会遇到一些问题, 因为有很多用例和方式来传递你的数据.

• 故障排查 => Options

options 对象不是响应式的. 所以如果你动态改变图表的配置, 他们将无法被 mixin 识别.

如果你正在使用 mixin , 你需要使用options来传递你的配置. 这是非常重要的, 因为 mixin 将调用 chart.js 的 update() 方法 或者 销毁并渲染一个新的图表. 如果 mixin 渲染一个新的图表, 它将调用this.renderChart(this.chartData, this.options).

但是如果你在mounted()传递你的配置, 它们将直接被遗弃.

错误的方式

import { Line, mixins } from 'vue-chartjs'
export default {
 components: { Line }
 mixins: [mixins.reactiveProp],
 mounted () {
 this.renderChart(this.chartData, {responsive: true})
 }
}

正确的方式

import { Line, mixins } from 'vue-chartjs'
export default {
 components: { Line }
 mixins: [mixins.reactiveProp],
 mounted () {
 this.renderChart(this.chartData, this.options)
 }
}

• 故障排查 => 自己的监视器

如果你对你的数据进行大量更改(而不是推新的数据), 那么最好的方式是创建自己的 watcher. 你可以自己调用 this.$data._chart.update() 或者 this.renderChart() 来实现, 当然这些完全取决于你自己.

一个简单的监视器将会是这样:

watch: {
 chartData () {
 this.$data._chart.update()
 }
}