mputzlocher/videoTax
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polar area chart instead of radar chart

Browse Source
This commit is contained in:
Martin Putzlocher 2023-04-03 14:00:06 +02:00
parent 3b9d1a83cc
commit c37406b990
1 changed files with 100 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
main.html
View File

@ -31,18 +31,66 @@
form.addEventListener("submit", processForm); form.addEventListener("submit", processForm);
} }
*/ */
Chart.defaults.font.size = 20;
Chart.defaults.font.size = 12;
function createChart(data, videotitle) { function createChart(data, videotitle) {
var chrt = document.getElementById("chartId").getContext("2d"); var ctx = document.getElementById("chartId").getContext("2d");
var chartId = new Chart(chrt, {
type: 'radar', // const customText = {
// id: 'customText',
// afterDraw: (chart, args, options) => {
// const {
// ctx,
// canvas
// } = chart;
// textObjects = options.text;
//
// if (textObjects.length === 0) {
// return;
// }
/*
textObjects.forEach((textObj) => {
ctx.save();
ctx.textAlign = textObj.textAlign || 'center';
ctx.font = `${textObj.size || '20px'} ${textObj.font || 'Arial'}`;
ctx.fillStyle = textObj.color || 'black'
ctx.fillText(textObj.text, textObj.x, textObj.y)
ctx.restore();
})
}
}*/
var chartId = new Chart(ctx, {
type: 'polarArea',
data: { data: {
labels: Array.from(data.keys()), labels: Array.from(data.keys()),
datasets: [{ datasets: [{
label: videotitle, label: videotitle,
data: Array.from(data.values()), data: Array.from(data.values()),
backgroundColor: "rgba(128,128,128,0.5)", // backgroundColor: "rgba(128,128,128,0.5)",
pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'], backgroundColor: [
"#f8cc1b90",
"#fa7a4890",
"#31195590",
"#84a2cd90",
"#bed05790",
"#4777cd90",
"#ffa5c890"],
pointBackgroundColor: [
"#f8cc1b90",
"#fa7a4890",
"#31195590",
"#84a2cd90",
"#bed05790",
"#4777cd90",
"#ffa5c890"],
borderColor: ['black'], borderColor: ['black'],
borderWidth: 1, borderWidth: 1,
pointRadius: 6, pointRadius: 6,
@ -67,18 +115,45 @@
}, },
responsive: false, responsive: false,
elements: { elements: {
line: { arc: {
borderWidth: 3 borderWidth: 3
} }
},
plugins: {
title: {
display: true,
text: 'Custom Chart Title',
padding: {
top: 10,
bottom: 30
},
font: {
size: 20
}
}
// ,
// customText: {
// text: [{
// text: 'Lorem ipsum',
// x: 0,
// y: 0,
// textAlign: 'center',
// size: '30px',
// color: 'black',
// font: 'Arial black'
// }
// ]
// }
} }
}, },
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
// This more specific font property overrides the global property // This more specific font property overrides the global property
fontSize: 20 fontSize: 10
} }
} }
// , customText: [customText]
} }
}); });
@ -106,12 +181,27 @@
chartId.data.datasets =[{ chartId.data.datasets =[{
label: videotitle, label: videotitle,
data: Array.from(data.values()), data: Array.from(data.values()),
backgroundColor: "rgba(128,128,128,0.5)", backgroundColor: [
pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'], "#f8cc1b90",
"#fa7a4890",
"#31195590",
"#84a2cd90",
"#bed05790",
"#4777cd90",
"#ffa5c890"],
pointBackgroundColor: [
"#f8cc1b90",
"#fa7a4890",
"#31195590",
"#84a2cd90",
"#bed05790",
"#4777cd90",
"#ffa5c890"],
borderColor: ['black'], borderColor: ['black'],
borderWidth: 1, borderWidth: 1,
pointRadius: 6, pointRadius: 6,
}]; }];
chartId.options.plugins.title.text = videotitle;
chartId.update(); chartId.update();
}; };