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 相关文章推荐
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Angular工具方法学习
Dec 26 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
微信小程序实现定位及到指定位置导航的示例代码
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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
JS获取父节点方法
2009/08/20 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
tornado+celery的简单使用详解
2019/12/21 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
写自荐信三大法宝
2014/01/24 职场文书
运动会致辞稿50字
2014/02/04 职场文书
社区消防工作实施方案
2014/03/21 职场文书
学校三节实施方案
2014/06/09 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
欠条范文
2015/07/03 职场文书
自荐信大全
2019/03/21 职场文书