Vue——vue-chartjs[Vue 对于 Chart.js 的封装]
GitHubhttps://github.com/apertureless/vue-chartjs
·
基本概念
vue-chartjs：vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.
Chart.js：Chart.js 是一套简单、干净并且有吸引力的基于 HTML5技术的 JavaScript图表工具。Chart.js为你提供了完整的易于集成到你的网站的生动、交互的图表。
官网地址
GitHub
https://github.com/apertureless/vue-chartjs
DEMO
API
vue-chartjs的API参考Chart.js的API：
注：vue-chartjs官方的文档只介绍了如何创建和使用插件部分，详细的属性配置还是需要去chart.js的文档里面找。
https://www.chartjs.org/docs/latest/
npm
npm install vue-chartjs chart.js --save组件
图表组件：
Bar:柱状图
HorizontalBar:水平条形图
Doughnut:圆环图
Line:折线图
Pie:饼图
PolarArea:极地区域图
Radar:雷达图/蛛网图
Bubble:气泡分布图
Scatter:散点图
其他组件：
mixins
generateChert
示例组件
import {Line} from 'vue-chartjs'
export default {
extends: Line,//要引入的图形 (bar是饼状图)
props:["data","options"],//可以在以组件传参的形式定义data,和options配置
//创建图形必须要在mounted函数里，
mounted:function(){
//是在配置线形图的渐变效果
this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450);
this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
this.renderChart({ //图形初始化函数
labels:[], //表示x轴的配置 如日期 ['1', '2', '3', '4', '5', '6','7',"8","9","10","11","12","13","14","15"],
datasets:[ //是个数组 表示线性走势及对走势线的配置
{
label: '0.38', //小标题的显示
backgroundColor: this.gradient,//线性图 的渐变颜色
data: [3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8],//数据走势
pointBackgroundColor: 'blue',//x轴 Y轴对应圆点的颜色
pointBorderColor: 'white',//x轴 Y轴对应圆点的圆点border的颜色
fontSize:0,//字体的大小
radius:"0"//圆点的半径
}
],
}, //相当于data配置
{
responsive: true, // 长宽，100%.如果要单设长和宽的话，要将responsive 设为false
maintainAspectRatio: false, // 保持长宽比
events: ['null'],//对事件的反应，null是对任何事件都无反应的设置，默认为["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]
layout: {//线形图 位置
padding: {
left: 0,
right:0,
top: 0,
bottom: 0
}
},
legend:{ // title下面的 小标题 和 小图的配置
display:true, //是显示
position:"top",//显示的位置
fullWidth:"true", //标记此框应占据画布的整个宽度（按下其他框）。这在日常使用中不太可能需要改变
onClick:function(){},//点击时的回调
onHover:function(){}, //在标签项上注册“mousemove”事件时调用的回调函数
reverse:false, //图例将以相反的顺序显示数据集。
labels:{ //图例标签配置
boxWidth:10 ,//彩色框的宽度
fontSize:"20", //文本的字体大小
fontStyle:"normal", //字体风格
fontColor:"red", // 文本的颜色
padding:10, //填充行之间的彩色框
fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字体家族
usePointStyle:false //标签样式将匹配相应的点样式（大小基于fontSize，在这种情况下不使用boxWidth）
}
},
animation: {//设置不做动画 （可以提高性能）
duration: 0// general animation time
},
hover: {
animationDuration: 0// duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
tooltips:{ //对点击提示框的配置
enabled:true, //是否启用工具提示
custom:null, //类型是function 可以自定义提示框
mode:"point"
/*
提示框可以出现那些数据 （
1、point 点 查找与点相交的所有项目。
2、nearest 最近的数据 获取距离该点最近的项目。最近的项目是根据到图表项目中心的距离（点，条）确定的。如果2个或更多项目在相同的距离，则使用面积最小的项目。如果intersect为true，则仅在鼠标位置与图形中的项目相交时触发。这对组合图表非常有用，其中点隐藏在条形图的后面。
3、index 标签 在相同的索引处查找项目。如果intersect设置为true，则使用第一个相交项目来确定数据中的索引。如果为intersectfalse，则在x方向上最近的项目用于确定索引。
4 dataset 数据集 在相同的数据集中查找项目。如果intersect设置为true，则使用第一个相交项目来确定数据中的索引。如果为intersectfalse，则使用最近的项目来确定索引
5 x 仅返回基于X位置坐标相交的所有项目。对于垂直游标实现将是有用的
6 y 根据Y位置的坐标返回所有相交的项目。这对于水平游标实现是有用的
）
callbacks:{ //所有的回调函数 http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
}
backgroundColor："red" //背景颜色等等
详细配置参考 git http://www.chartjs.org/docs/latest/configuration/tooltip.html
*/
},
title: { //对标题的配置
display: true,//是否显示
text: 'Custom Chart Title:0.38', //title内容
position:"left", //title位置
fontSize:20, //字体大小 默认为12px
fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字体家族文本
fontColor:'#666',
fontStyle:'bold', //字体样式
padding:10, //在标题文本上方和下方添加的像素数量
lineHeight:10 //单行文本的高度
},
scales:{ //对x，y轴进行个人配置及对 网格等进行个性化配置都写在此处
yAxes:[{ //对Y轴进行配置
ticks:{ //对Y轴开始配置
beginAtZero:true,//如果为true，则如果还没有包含，则标度将包括0。
suggestedMin: 1,//计算最小数据值时使用的调整
suggestedMax: 5,//计算最小数据值时使用的调整
stepSize:1, //用户定义的比例尺的固定步长
maxTicksLimit:1, //最大数量的刻度线和网格线显示
min:0, //用户定义的最小数量，覆盖数据的最小值
max:0, //用户定义的最大数量，覆盖数据的最大值
},
gridLines: {//Y轴网格配置
display:false, //如果为false，则不显示该轴的网格线。
color:"red",//网格线的颜色。如果指定为数组，第一种颜色适用于第一个网格线，第二个适用于第二个网格线，依此类推
borderDash:1,//网格线上的破折号的长度和间距
borderDashOffset:1,//折线为破折号
lineWidth:1, //网格线的行程宽度
drawBorder:true,//如果为true，则在轴和图表区域之间的边缘绘制边框
drawOnChartArea:true, //如果为true，则在轴线内的图表区域绘制线条。当有多个轴时，这是很有用的，而且您需要控制绘制哪些网格线。
drawTicks:true,//如果为true，则在图表旁边的轴区域中的刻度线旁绘制线条
tickMarkLength:10, //网格线将绘制到轴区域的长度（以像素为单位）
zeroLineWidth:1, //第一个索引（索引0）的网格线的行程宽度
zeroLineColor:"red", //第一个索引（索引0）的网格线的笔触颜色
zeroLineBorderDash:1, //第一个索引（索引0）的网格线的破折号的长度和间隔
zeroLineBorderDashOffset:1, //第一个索引（索引0）的网格线的折线偏移量
offsetGridLines:false, //如果为true，网格线将被移动到标签之间。这true在默认情况下设置在条形图中
//更多配置http://www.chartjs.org/docs/latest/axes/radial/linear.html
}
}],
xAxes:[{
//x轴同Y轴一样上配置
}]
},
})//相当于options配置
this.gradient = this.$refs.canvas //再引入chart.js的的组件内开始绘图
}
}
效果
参考文章
https://www.jianshu.com/p/466c99c07930
https://www.npmjs.com/package/vue-chartjs
https://blog.csdn.net/gqzydh/article/details/99213365
https://blog.csdn.net/masterShaw/article/details/76045359
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献22条内容
所有评论(0)