vue-chartjs

对于第三方控件的使用，可参考的文档：官网、或查询导入的第三方代码

vue-chartjs图表数据结构为：数据结构官网： http://www.chartjs.org/docs/latest/charts/line.html#cubicInterpolationMode

（

this.renderChart（data, options）

其中官网中的

Configuration options 都是options中的属性。

Chart.defaults.global 就是和options同级别的。

例子：

options: {tooltips: {intersect: false // default: true. if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.},animation: {duration: 1  // 动画时长},responsive: true, // 长宽，100%.如果要单设长和宽的话，要将responsive 设为falsemaintainAspectRatio: false // 保持长宽比}

）

数据结构例子：

chartData: {labels: ['', '', '', '', '', '', '', '', '', '','', '', '', '', '', '', '', '', '', '','', '', '', '', '', '', '', '', '', '','', '', '', '', '', '', '', '', '', '','', '', '', '', '', '', '', '', '', '','', '', '', '', '', '', '', '', '', ''],datasets: [{label: '租户:' + (self.tanent==null? "all" :self.tanent) + '   group:' + (self.groupName==null? "all" :self.groupName) + "   event:" + (self.event==null? "all" :self.event),
//            backgroundColor: "rgba(255,255,255,0",
//            borderColor: '#FC2525',
//            pointBackgroundColor: 'FC2525',
//            borderWidth: 1,
//            pointBorderColor: 'FC2525',backgroundColor: null,data: [null, null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null, null, null, null]}]}

注释掉的部分就是它内部的属性。 backgroundColor是所有的背景色，border是线条颜色，point是点颜色

vue-chartjs

这是vue的图表控件：http://vue-chartjs.org/#/home?id=installation

npm install vue-chartjs -s
npm install chart.js -s

代码示例：

<script>import {Line, mixins} from 'vue-chartjs'const { reactiveProp } = mixinsexport default Line.extend({mixins: [reactiveProp],props: ['chartData'],mounted () {this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})}})
</script>

这段代码的作用就是自己封装了一个折线图控件，这个可以是js文件，也可以是没有template的vue文件。

为什么用mixins。这个是用来判断图表的chartData；来自哪里？是这几的data:function(){return{}} 还是props：【】中，如果是reactiveProp则来自props。如果是reactiveData则来自自己的data方法中的return中。

那为什么renderChart方法中第一个参数一定要chartData呢？因为，reactiveProp.js 和reactiveData。js中只有对chartData的watch。

vue-chartjs插件

’

reactiveProp.js的代码

module.exports = {props: {chartData: {required: true}},watch: {'chartData': {handler (newData, oldData) {if (oldData) {let chart = this._chart// Get new and old DataSet Labelslet newDatasetLabels = newData.datasets.map((dataset) => {return dataset.label})let oldDatasetLabels = oldData.datasets.map((dataset) => {return dataset.label})// Stringify 'em for easier compareconst oldLabels = JSON.stringify(oldDatasetLabels)const newLabels = JSON.stringify(newDatasetLabels)// Check if Labels are equal and if dataset length is equalif (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {newData.datasets.forEach((dataset, i) => {// Get new and old dataset keysconst oldDatasetKeys = Object.keys(oldData.datasets[i])const newDatasetKeys = Object.keys(dataset)// Get keys that aren't present in the new dataconst deletionKeys = oldDatasetKeys.filter((key) => {return key !== '_meta' && newDatasetKeys.indexOf(key) === -1})// Remove outdated key-value pairsdeletionKeys.forEach((deletionKey) => {delete chart.data.datasets[i][deletionKey]})// Update attributes individually to avoid re-rendering the entire chartfor (const attribute in dataset) {if (dataset.hasOwnProperty(attribute)) {chart.data.datasets[i][attribute] = dataset[attribute]}}})chart.data.labels = newData.labelschart.update()} else {chart.destroy()this.renderChart(this.chartData, this.options)}} else {this.renderChart(this.chartData, this.options)}}}}
}

reactiveData.js

module.exports = {data () {return {chartData: null}},watch: {'chartData': {handler (newData, oldData) {if (oldData) {let chart = this._chart// Get new and old DataSet Labelslet newDatasetLabels = newData.datasets.map((dataset) => {return dataset.label})let oldDatasetLabels = oldData.datasets.map((dataset) => {return dataset.label})// Stringify 'em for easier compareconst oldLabels = JSON.stringify(oldDatasetLabels)const newLabels = JSON.stringify(newDatasetLabels)// Check if Labels are equal and if dataset length is equalif (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {newData.datasets.forEach((dataset, i) => {// Get new and old dataset keysconst oldDatasetKeys = Object.keys(oldData.datasets[i])const newDatasetKeys = Object.keys(dataset)// Get keys that aren't present in the new dataconst deletionKeys = oldDatasetKeys.filter((key) => {return key !== '_meta' && newDatasetKeys.indexOf(key) === -1})// Remove outdated key-value pairsdeletionKeys.forEach((deletionKey) => {delete chart.data.datasets[i][deletionKey]})// Update attributes individually to avoid re-rendering the entire chartfor (const attribute in dataset) {if (dataset.hasOwnProperty(attribute)) {chart.data.datasets[i][attribute] = dataset[attribute]}}})chart.data.labels = newData.labelschart.update()} else {chart.destroy()this.renderChart(this.chartData, this.options)}} else {this.renderChart(this.chartData, this.options)}}}}
}

Configuration options

禁止chart图表自己的事件：

options: {tooltips: {intersect: false // default: true. if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.},events:[], // 禁止了它所有的eventsresponsive: false, // true: 长宽，100%; 如果要单设长和宽的话，要将responsive 设为falsemaintainAspectRatio: false // 保持长宽比}

events中的值为： http://www.chartjs.org/docs/latest/general/interactions/events.html

vue-chartjs相关推荐

2023 年值得推荐的 Vue 库
目录一. 状态管理 (1)Pinia (2)Vuex (3)vuex-persist 二.表单 (1)VeeValidate (2)vue-form-making (3)FormKit 三.文档 ( ...
最值得推荐的热门又实用的 Vue 库
Tiptap 是一个基于 Vue 的无渲染的富文本编辑器,它基于 Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件.使用无渲染组件(函数式组件),几乎完全控制标记和样 ...
chartjs更新数据 vue_vue.js - 在vue中怎么更改chart图表的文字大小
问题 import {Line} from 'vue-chartjs' export default Line.extend({ data () { return { gradient: null, ...
vue连线插件_vue 插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. http://ww ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
Vue——vue-chartjs[Vue 对于 Chart.js 的封装]
基本概念 vue-chartjs:vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart ...
Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...

vue-chartjs

Configuration options 都是options中的属性。

Configuration options

vue-chartjs相关推荐

最新文章

热门文章