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 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
window.location.hash知识汇总
Nov 09 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
跟我学习javascript的this关键字
May 28 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
详解Typescript里的This的使用方法
Jan 08 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导出Word文档的原理和实例
2013/10/21 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
超级退弹代码
2008/07/07 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python实现学校管理系统
2018/01/11 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python环境下安装opencv库的方法
2020/03/05 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
教堂婚礼主持词
2014/03/14 职场文书
挂靠协议书范本
2014/04/22 职场文书
模具专业自荐信
2014/05/29 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年女工委工作总结
2015/07/27 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP