vue-chartjs使用教程

学习链接介绍

vue-chartjs文档翻译（该作者教程介绍详细，简单易学）

chartjs官网（data数据结构，option图标选项都可以很方便查找）

chart官网2 （常见官网）

chart所有图形例子展示（所有图表都可看到）

vue-chartjs 是 Vue 对于 Chart.js 的封装. 你可以很简单的创建可复用的图表组件.

安装

npm install vue-chartjs chart.js --save

组件

Bar
HorizontalBar
Doughnut
Line
Pie
PolarArea
Radar
Bubble
Scatter
mixins
generateChert

引用

<script>
import { Line } from 'vue-chartjs'export default {extends: Line,props: ['chartdata', 'options'],mounted () {this.renderChart(this.chartdata, this.options)}
}
</script><style>
</style>

this.renderChart()方法由Bar组件提供，接收两个对象参数。第一个是你的图表数据，第二个是配置对象。在这个文档中查看你需要提供的对象结构Chart.js docs。

export default {extends: Bar,props: ['data','max','min',],mounted() {const {labels,data,bgColors,} = (this as any).data.chartData;const thisTitle = (this as any).data.label;const units = (this as any).data.unit && (this as any).data.unit.data.find((i: any) => i);const tableTitle = this.$t(thisTitle) + '(' + (units) + ')';// const max = (this as any).data.max;const maxVal = Number(Math.max.apply(null, this.data.chartData.data)) * 1.2;const max =  Math.ceil(maxVal);const min = 0;const datacollection = {labels,datasets: [{backgroundColor: bgColors,data,} ],};const options: any = {animation: {duration: 100,onComplete: function() {const chartInstance = (this as any).chart;const ctx = chartInstance.ctx;// ctx.font = Chart.helpers.fontString(//     Chart.defaults.global.defaultFontSize,//     Chart.defaults.global.defaultFontStyle,//     Chart.defaults.global.defaultFontFamily// );ctx.textAlign = 'center';// ctx.textBaseline = "bottom";// ctx.fillStyle = "#F5A623";(this as any).data.datasets.forEach(function(dataset, i) {const meta = chartInstance.controller.getDatasetMeta(i);meta.data.forEach(function(bar, index) {ctx.fillText(`${dataset.data[index]}`,bar._model.x,bar._model.y - 5,);});});},},bars: {maxBarThickness: 20,},events: ['null'],responsive: true,maintainAspectRatio: true,legend: {display: false,position: 'top', // 显示的位置fullWidth: 'true',//   labels:{ //图例标签配置//         boxWidth:10 ,//彩色框的宽度//         fontSize:"20", //文本的字体大小//         fontStyle:"normal" //字体风格//         fontColor："red" , // 文本的颜色//         padding:10 //填充行之间的彩色框//         fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //字体家族//        usePointStyle:false //标签样式将匹配相应的点样式（大小基于//                    fontSize，在这种情况下不使用boxWidth）  //     // }        },title: {                display: true,text: tableTitle,position: 'top',// fontSize:20,   //字体大小 默认为12px// fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //字体家族文本// fontColor:'#666'// fontStyle:'bold' //字体样式 // padding:10 //在标题文本上方和下方添加的像素数量// lineHeight:10 //单行文本的高度 },tooltips: {enabled: true,mode: 'point',},scales: {yAxes: [{stacked: true,ticks: {beginAtZero: true,fontSize: 11,max,min,fontColor: '#9E9E9E',},}],xAxes: [{barThickness: 18,ticks: {fontSize: 13,fontColor: '#353535',},}],},};(this as any).renderChart(datacollection, options);},
};
</script>

vue-chartjs使用教程相关推荐

Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
vue整合视频流教程
vue整合视频流教程业务需求:客户需要将监控接入到自己的app中,在市面上很多监控是不分享视频流地址的,推荐方案选择海康,大华等品牌的监控,获取到监控地址整合到自己的app中. 在开发前需要普及的一 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
手把手Vue前端开发教程
手把手Vue前端开发教程本文将手把手地教你如何使用Vue进行前端开发. 简介 Vue.js 是一款渐进式 JavaScript 框架,易于上手.Vue 可以被用来开发单页面应用 (SPA) 以及简单 ...
Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
vue项目实践教程1：vux项目搭建和简介
vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多. 这里,笔者 ...
初步创建vue/cli工程教程
首先第一步创建vuecli工程,创建vuecli工程需要用nodejs+npm下载环境就行,这个工程非常的庞大,教程走一波! ·····先去vue官网找到下载vue/cli的命令-----官网地址:v ...

vue-chartjs使用教程

学习链接介绍

安装

组件

引用

this.renderChart()方法由Bar组件提供，接收两个对象参数。第一个是你的图表数据，第二个是配置对象。在这个文档中查看你需要提供的对象结构Chart.js docs。

vue-chartjs使用教程相关推荐

最新文章

热门文章