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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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 Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
深入学习Python中的上下文管理器与else块
2017/08/27 Python
浅谈django orm 优化
2018/08/18 Python
一百行python代码将图片转成字符画
2021/02/19 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
物理专业本科生自荐信
2014/01/30 职场文书
入股协议书
2014/04/14 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
结婚老公保证书
2015/02/26 职场文书
倡议书范文大全
2015/04/28 职场文书
2016新年感言
2015/08/03 职场文书
资产移交协议书
2016/03/24 职场文书