1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| function mychart(test) {
var ops = [];
var serie = [];
var min = [];
var max = [];
for (var i in test) {
ops.push(test[i].ops);
serie.push(test[i].serie);
min.push(test[i].min);
max.push(test[i].max);
}
var chartdata = {
labels: ops,
datasets: [
{
type: 'line',
label: 'Min',
yAxisID: 'A',
backgroundColor: "rgb(255, 0, 0)",
borderColor: "rgb(255, 0, 0)",
data: min //la valeur mini a comparer avec la valeur de serie
}, {
type: 'line',
label: 'Max',
yAxisID: 'A',
backgroundColor: "rgb(255, 255, 0)",
borderColor: "rgb(255, 255, 0)",
data: max //la valeur maxi a comparer avec la valeur de serie
}, {
type: 'bar',
label: 'Serie',
yAxisID: 'A',
backgroundColor: "rgb(0, 0, 255)", // changer couleur si valeur serie inferieure ou superieur a maxi
data: serie //la valeur serie a comparer avec les valeurs mini et maxi
}
]
};
rendertest(chartdata);
}
function rendertest(chartdata) {
var delayed;
var ctx = document.getElementById("charttest").getContext('2d');
window.myCharta = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
position: 'top',
align: "start",
text: 'Graphique test',
font: {
size: 20,
family : 'sans-serif',
color: "#666",
weight: "normal"
}
},
},
animation: {
onComplete: () => {
delayed = true;
},
delay: (context) => {
let delay = 0;
if (context.type === 'data' && context.mode === 'default' && !delayed) {
delay = context.dataIndex * 300 + context.datasetIndex * 100;
}
return delay;
},
},
maintainAspectRatio: true
}
});
} |
Partager