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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
微信小程序云开发实现增删改查功能
May 17 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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+mysql分页代码详解
2008/03/27 PHP
php操作xml
2013/10/27 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
JS 表单验证大全
2011/11/23 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
微信小程序实现购物车小功能
2020/12/30 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
python保存字符串到文件的方法
2015/07/01 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers