vue集成chart.js的实现方法


Posted in Javascript onAugust 20, 2019

指令

该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行

Vue.directive('loaded-callback', {
 inserted: function (el, binding, vnode) {
  binding.value(el, binding, vnode)
 }
})

安装chartjs

npm install chart.js --save

chartjs 组件

<template>
  <canvas refs="chartcanvas" v-loaded-callback="setCanvas"></canvas>
</template>
<script type="text/javascript">
require('chart.js')
export default{
  name: 'components-base-chartjs',
  props: {
    'data': {},
    'options': {},
    'type': {}
  },
  data:function(){
    return {
      canvas: null,
      chart: null
    }
  },
  watch:{
    canvas: function () { // chart对象生成时触发
      this.initChart()
    },
    data: {
      handler: function () { // 数据变化时触发
        this.updateChart()
      },
      deep: true
    }
  },
  destoryed:function (){
    if(this.cahrt){
      this.cahrt.destroy()
    }
  },
  computed: {
    currentOptions: function (){
      var options = {}
      if(this.options){ // 加载自定义配置参数
        for(var i in this.options){
          options[i] = this.options[i]
        }
      }
      return options
    }
  },
  methods: {
    setCanvas: function(el){ // dom生成时触发
      this.canvas = el
    },
    initChart: function () { // 更新chart结果
      if(this.data && this.currentOptions){ // 保证参数的存在
        this.chart = new Chart(this.canvas.getContext('2d'),{
          type: this.type,
          data: this.data,
          options: this.currentOptions
        })
      }
    },
    updateChart: function () { // 更新chart结果
      this.chart.data = JSON.parse(JSON.stringify(this.data))
      this.chart.update()
    }
  }
}
</script>

用法

<chartjs :options="options" type="pie" :data="data"></chartjs>

options 及数据结构

请跳转

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
babel基本使用详解
Feb 17 Javascript
React组件生命周期详解
Jul 03 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 #Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 #Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 #Javascript
Vue实现购物车详情页面的方法
Aug 20 #Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 #Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 #Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
Python书单 不将就
2017/07/11 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
python手写均值滤波
2020/02/19 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python requests接口测试实现代码
2020/09/08 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
社团活动总结书
2014/06/27 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
物业工程部岗位职责
2015/02/11 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
使用Python拟合函数曲线
2022/04/14 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang