Créer un graphique chartjs avec multiple courbe venant d'un donnée dynamique

Fermé
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 24 févr. 2021 à 15:45
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!
A voir également: