Vue 3 + Chart js + Vue Chart 3 + jsPDF + html2Canvas Tutorial Last Updated Month of May Year 2022

Visual Studio Code : version 1.67.2
Visual Studio Code Extensions :
- Auto Close Tag (Author : Jun Han) : version 0.5.14
- Vetur (Author : Pine Wu) : version 0.35.0
Dependencies / Plugins :
- vue cli : version 5.0.0 (https://www.npmjs.com/package/@vue/cli)
- vue : version 3.2.13 (https://www.npmjs.com/package/@vue/cli)
- chart.js : version 3.7.1 (https://www.npmjs.com/package/vue-chart-3)
- vue-chart-3 : version 3.1.8 (https://www.npmjs.com/package/vue-chart-3)
- jspdf : version 2.5.1 (https://www.npmjs.com/package/jspdf)
- html2canvas : version 1.4.1 (https://www.npmjs.com/package/html2canvas)

** Chart js rendering in web application
import { shuffle } from 'lodash'
import { Chart, registerables } from 'chart.js'
import { DoughnutChart } from 'vue-chart-3'

DoughnutChart id="mydoughnut" ref="doughnutRef" :chartData="testData" :options="options"
const plugin = {
id: 'bgColor',
beforeDraw: (chart) = {
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, width, height)
ctx.restore()
ctx.save()
}
}
Chart.register(...registerables, plugin)
const dtValues = ref([30, 40, 60, 70, 5])
const dtLabels = ref(['Malaysia', 'Thailand', 'Indonesia', 'Vietnam', 'Philippines'])
const doughnutRef = ref()
const toggleLegend = ref(true)
const testData = computed(() = ({
labels: dtLabels.value,
datasets: [
{
data: dtValues.value,
backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
},
],
}))
const options = computed(() = ({
responsive: true,
scales: {
myScale: {
position: toggleLegend.value ? "left" : "right",
},
},
plugins: {
legend: {
position: toggleLegend.value ? "top" : "bottom",
},
title: {
display: true,
text: 'Chart.js Doughnut Chart',
},
},
}))
function shuffleData() {
dtValues.value = shuffle(dtValues.value)
dtLabels.value = shuffle(dtLabels.value)
}
function switchLegend() {
toggleLegend.value = !toggleLegend.value
}
let index = ref(1)
function addData() {
dtValues.value.push(index.value)
dtLabels.value.push("Other" + index.value)
index.value++
}
onMounted(() = {
doughnutRef.value.chartInstance.toBase64Image()
})
return {
testData,
doughnutRef,
options,
shuffleData,
switchLegend,
addData,
}

** PDF File Generation in text based or image based
import jsPDF from "jspdf"
import html2canvas from "html2canvas"

html2canvas.toDataURL('image/png')
new jsPDF('p', 'mm', 'a4', true)
jsPDF.addImage(imgData, 'PNG', x, y, width, height)
jsPDF.html(HTMLelement, {x, y, callback: function(){ //coding }})
jsPDF.output('bloburl')
jsPDF.save()
date.getFullYear() //Current Year
date.getMonth()+1 //Current Month
date.getDate() //Current Day
.toString().padStart(2,'0') //2 Zero Padding
setTimeout(()={
//Coding
},300)

Видео Vue 3 + Chart js + Vue Chart 3 + jsPDF + html2Canvas Tutorial Last Updated Month of May Year 2022 канала YiLoon Carter