Update Chart.js and change style for a more fitting one
This commit is contained in:
@@ -10,10 +10,9 @@
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
|
||||
<link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
|
||||
<link rel="stylesheet" href="plugins/chart.min.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<script src="plugins/chart.bundle.min.js"></script>
|
||||
<script src="plugins/chart-3.9.1.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
<script src="scripts/divers.js"></script>
|
||||
<script src="scripts/stats.js"></script>
|
||||
@@ -162,13 +161,13 @@
|
||||
|
||||
<div id="stats">
|
||||
<div class="stat">
|
||||
<canvas id="month" width="400" height="200"></canvas>
|
||||
<canvas id="month"></canvas>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<canvas id="year" width="400" height="200"></canvas>
|
||||
<canvas id="year"></canvas>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<canvas id="dimension" width="400" height="200"></canvas>
|
||||
<canvas id="dimension"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -8,9 +8,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<link rel="stylesheet" href="plugins/chart.min.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="plugins/chart.bundle.min.js"></script>
|
||||
<script src="plugins/chart-3.9.1.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
<script src="scripts/informations.js"></script>
|
||||
</head>
|
||||
|
||||
13
plugins/chart-3.9.1.min.js
vendored
Normal file
13
plugins/chart-3.9.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
plugins/chart.bundle.min.js
vendored
7
plugins/chart.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
1
plugins/chart.min.css
vendored
1
plugins/chart.min.css
vendored
@@ -1 +0,0 @@
|
||||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
|
||||
@@ -50,6 +50,9 @@ jQuery(document).ready(function($)
|
||||
gatherYear(tens, 2010, 2020);
|
||||
}
|
||||
|
||||
Chart.defaults.font.family = "'Rubik', Helvetica";
|
||||
Chart.defaults.color = "#000000";
|
||||
|
||||
var canvasPhoto = document.getElementById("photo").getContext('2d');
|
||||
var chartPhoto = new Chart(canvasPhoto, {
|
||||
type: 'bar',
|
||||
@@ -83,40 +86,60 @@ jQuery(document).ready(function($)
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
titleFont: {
|
||||
size: 14
|
||||
},
|
||||
bodyFont: {
|
||||
size: 14
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
y: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 14
|
||||
},
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: true
|
||||
},
|
||||
scaleLabel: {
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
text: 'Tableaux',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
stacked: true,
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 14
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
stacked: true,
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
responsiveAnimationDuration: 0,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
278
scripts/stats.js
278
scripts/stats.js
@@ -1,128 +1,172 @@
|
||||
jQuery(document).ready(function($)
|
||||
{
|
||||
var canvasMonth = document.getElementById("month").getContext('2d');
|
||||
var chartMonth = new Chart(canvasMonth, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
});
|
||||
document.fonts.ready.then(function() {
|
||||
Chart.defaults.font.family = "'Rubik', Helvetica";
|
||||
Chart.defaults.color = "#000000";
|
||||
|
||||
var canvasYear = document.getElementById("year").getContext('2d');
|
||||
var chartYear = new Chart(canvasYear, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [24, 16, 7, 57, 117, 112, 52],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
var canvasMonth = document.getElementById("month").getContext('2d');
|
||||
var chartMonth = new Chart(canvasMonth, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
|
||||
backgroundColor: '#2589BD',
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
});
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
titleFont: {
|
||||
size: 13
|
||||
},
|
||||
bodyFont: {
|
||||
size: 13
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Tableaux'
|
||||
}
|
||||
},
|
||||
xAxes: {
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
});
|
||||
|
||||
var canvasDimension = document.getElementById("dimension").getContext('2d');
|
||||
var chartDimension = new Chart(canvasDimension, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [2, 42, 173, 59, 107],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
var canvasYear = document.getElementById("year").getContext('2d');
|
||||
var chartYear = new Chart(canvasYear, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [24, 16, 7, 57, 117, 112, 52],
|
||||
backgroundColor: '#2589BD',
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
titleFont: {
|
||||
size: 13
|
||||
},
|
||||
bodyFont: {
|
||||
size: 13
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Tableaux'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
});
|
||||
|
||||
var canvasDimension = document.getElementById("dimension").getContext('2d');
|
||||
var chartDimension = new Chart(canvasDimension, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [2, 42, 173, 59, 107],
|
||||
backgroundColor: '#2589BD',
|
||||
}]
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
titleFont: {
|
||||
size: 13
|
||||
},
|
||||
bodyFont: {
|
||||
size: 13
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Tableaux'
|
||||
},
|
||||
stacked: true,
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
lineWidth: 0
|
||||
},
|
||||
stacked: true,
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
responsiveAnimationDuration: 0
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user