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 :

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

DoughnutChart id="mydoughnut" ref="doughnutRef" :chartData="testData" :options="options"
const plugin = {
id: 'bgColor',
beforeDraw: (chart) = {
}
}
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(() = ({
datasets: [
{
backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
},
],
}))
const options = computed(() = ({
responsive: true,
scales: {
myScale: {
},
},
plugins: {
legend: {
},
title: {
display: true,
},
},
}))
function shuffleData() {
}
function switchLegend() {
}
let index = ref(1)
function addData() {
}
onMounted(() = {
})
return {
testData,
doughnutRef,
options,
shuffleData,
switchLegend,
addData,
}

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

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()
.toString().padStart(2,'0') //2 Zero Padding
setTimeout(()={
//Coding
},300)