Bonjour, j'ai un code qui marche bien:
<html>
<head>
<title>Logarithmic Line Chart</title>
<script src="https://www.chartjs.org/dist/2.9.4/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="card-deck">
<div class="container-fluid gedf-wrapper">
<div class="row" id="places">
<div class="col-md-12" >
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<canvas id="barChart" width="400" height="400"></canvas>
<!--<canvas id="chart"></canvas>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var labels_x1 = [1, 2, 3, 4, 5];
var array2=[];
for (var i=0;i<labels_x1.length;i++){
array2.push(labels_x1[i]);
}
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: array2,
datasets: [{
label: "Stock A",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78],
spanGaps: true,
}, {
label: "Stock B",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: false
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89],
spanGaps: false,
}
]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
</script>
</html>
Ce qui donne le résultat:
Comme vous voyez le donnée est stocké dans un variable de type tableau:
var labels_x1 = [1, 2, 3, 4, 5];
Mais ce que je souhaite c'est de mettre dans ce courbe un tableau à multidimensionnel du genre:
var labels_xx = [{labels 1: 1, 2, 3, 4, 5},{labels: 2 :1, 2, 6, 8, 10},{labels 3: 1, 6, 8, 10, 15},....];
Pouvez vous m'aider s'il vous plait, merci d'avance!