vue-chartjs使用教程
学习链接介绍vue-chartjs文档翻译(该作者教程介绍详细,简单易学)chartjs官网 (data数据结构,option图标选项都可以很方便查找)chart官网2 (常见官网)chart所有图形例子展示(所有图表都可看到)vue-chartjs是 Vue 对于Chart.js的封装. 你可以很简单的创建可复用的图表组件.安装npm install vue-chartjs chart.js -
·
学习链接介绍
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>
更多推荐
已为社区贡献12条内容
所有评论(0)