起步

您所在的位置：网站首页 › diagram和chart › 起步

起步

2024-07-03 11:24| 来源: 网络整理| 查看: 265

起步 #

vue-chartjs 是 Vue 对于 Chart.js 的封装. 你可以很简单的创建可复用的图表组件.

介绍 #

vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人

它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大的灵活性.

安装 #NPM #

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

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

TIP

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

yarn add vue-chartjs@legacy

浏览器 #

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

整合 #

Chart.js 将所有可用的图表类型, 都导出为命名组件, 并可以直接导入它们. 这些组件都是普通的 Vue 组件, 然而, 你需要扩展它.

vue-chartjs 的想法是提供容易使用的组件, 并且具有最大限度的灵活性和扩展性. 要实现这一点, 你需要创建你自己的 Chart Component 并通过 vue-chartjs 提供的组件来扩展它.

这样，Chart组件中的方法和逻辑就可以合并到您自己的图表组件中.

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

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

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

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

TIP

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

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

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

Vue 单文件组件 #

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

Chart.vue

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

不要使用Template标签

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

更新 Charts #

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

reactivePropreactiveData

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

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

例子 #

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

Randomize 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 } } } .small { max-width: 600px; margin: 150px auto; }

限制

CaveatsChange-Detection-Caveatsvm.$watch

事件 #

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

chart:render - 如果 mixin 执行完全重绘chart:destroy - 如果 mixin 删除图表对象实例chart:update - 如果 mixin 执行更新而不是重绘labels:update - 如果设置了新的labelsxlabels:update 如果设置了新的xLabelsylabels: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() } } 例子 #使用props的图表 #

你的目标因该是创建可复用的图表组件. 出于这个目的, 你应该利用 Vue.js 的props 来传递你的配置和图表数据. 这种方式, 图表自己不用关心, 关于提取数据, 只用来展示.

首先, 创建你的组件

import { Line } from 'vue-chartjs' export default { extends: Line, props: { chartdata: { type: Object, default: null }, options: { type: Object, default: null } }, mounted () { this.renderChart(this.chartdata, this.options) } }

然后, 你可以把你的组件添加到父组件里

图表使用本地数据 #

你可以直接在你自己的图表组件里处理你的图表数据. 你只需要把它传递到 renderChart().

import { Bar } from 'vue-chartjs' export default { extends: Bar, data: () => ({ chartdata: { labels: ['January', 'February'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [40, 20] } ] }, options: { responsive: true, maintainAspectRatio: false } }), mounted () { this.renderChart(this.chartdata, this.options) } } Chart使用API的数据 #

使用API获取数据是一种常见模式. 然而, 这里有一些问题需要记住. 最常见的问题是, 你直接安装你的图表, 将异步API回调的数据传递进去. 这种方法导致的问题是, chart.js 试图去渲染你的图表, 访问图表数据, 但是你的API回调是异步的. 所以你图表在你数据到达前安装.

防止这个问题, 一个 v-if 即可.

创建你的图表组件通过一个数据参数和一个配置参数, 所以我们可以从一个容器组件中传递我们的数据和配置.

Chart.vue

然后创建一个容器组件, 用来处理你的API回调和vuex连接. ChartContainer.vue

import LineChart from './Chart.vue' export default { name: 'LineChartContainer', components: { LineChart }, data: () => ({ loaded: false, chartdata: null }), async mounted () { this.loaded = false try { const { userlist } = await fetch('/api/userlist') this.chartdata = userlist this.loaded = true } catch (e) { console.error(e) } } } Chart的动态样式 #

你可以设置 responsive: true 然后传递到 styles 对象, 这被当做内联样式应用于外层div. 这种方式你可以动态改变外层容器的高度和宽度, 这并不是chart.js 的默认行为. 使用计算属性可以很好的完成.

WARNING

你需要设置 position: relative

Increase height export default { data () { return { height: 300 } }, methods: { increase () { this.height += 10 } }, computed: { myStyles () { return { height: `${this.height}px`, position: 'relative' } } } } 自定义/新的图表 #

有时候你需要扩展Chart.js默认的图表. 这里有许多例子, 来教你如何扩展和修改默认的图表, 或者创建自己的图表类型.

在 vue-chartjs, 你可以使用同样的方式来做到这一点

// 1. 引入Chart.js, 你可以使用全局的图表对象 import Chart from 'chart.js' // 2. 引入 `generateChart()`方法创建vue组件. import { generateChart } from 'vue-chartjs' // 3. 扩展一个默认图表 // http://www.chartjs.org/docs/latest/developers/charts.html Chart.defaults.LineWithLine = Chart.defaults.line; Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* 自定义 */}) // 4. 生成 vue-chartjs 组件 // 第一个参数是图表id, 第二个参数是图表类型. const CustomLine = generateChart('custom-line', 'LineWithLine') // 5. 像使用默认的vue-chartjs图表一样, 扩展自定义组件 export default { extends: CustomLine, mounted () { // .... } } 资源 #

你可以在这里找到一些资源，比如关于如何使用vue-chartjs的教程

Using vue-chartjs with WordPressCreate stunning Charts with Vue and Chart.jsLet’s Build a Web App with Vue, Chart.js and an API Part ILet’s Build a Web App with Vue, Chart.js and an API Part IIBuild a realtime chart with VueJS and Pusher

【本文地址】

起步

起步

今日新闻

推荐新闻