Afficher le graphique à courbes avec des points connectés en utilisant chartJS

Question

Je souhaite tracer un graphique comme celui-ci en utilisant ChartJS. Mais je n'ai pas trouvé de solution pour connecter les premiers et derniers points et montrer un seul point unique dans cette zone connectée. Et j'ai aussi besoin de styliser chaque point avec des couleurs différentes. J'ai essayé d'explorer la documentation de ChartJS mais je n'ai pas trouvé de solution. Y a-t-il une bibliothèque de dessin de carte qui a ces caractéristiques ou comment faire cela avec ChartJS?

Answer 1

Vous pouvez créer un scatter chart au lieu de line.

Voici un example:
^{(essayé de reproduire votre PSEA image donnée)}

var chart = new Chart(ctx, { 
 
    type: 'scatter', 
 
    data: { 
 
     datasets: [{ 
 
     data: [{ 
 
      x: 1, 
 
      y: 1 
 
     }, { 
 
      x: 3, 
 
      y: 7 
 
     }, { 
 
      x: 6, 
 
      y: 5 
 
     }, { // add same data as the first one, to draw the closing line 
 
      x: 1, 
 
      y: 1 
 
     }], 
 
     borderColor: 'black', 
 
     borderWidth: 1, 
 
     pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'], 
 
     pointBorderColor: ['#000', '#00bcd6', '#d300d6'], 
 
     pointRadius: 5, 
 
     pointHoverRadius: 5, 
 
     fill: false, 
 
     tension: 0, 
 
     showLine: true 
 
     }, { 
 
     data: [{ 
 
      x: 3.5, 
 
      y: 4.5 
 
     }], 
 
     pointBackgroundColor: 'orange', 
 
     pointBorderColor: 'darkorange', 
 
     pointRadius: 10, 
 
     pointHoverRadius: 10 
 
     }] 
 
    }, 
 
    options: { 
 
     legend: false, 
 
     tooltips: false, 
 
     scales: { 
 
     xAxes: [{ 
 
      ticks: { 
 
       min: 0, 
 
       max: 10 
 
      }, 
 
      gridLines: { 
 
       color: '#888', 
 
       drawOnChartArea: false 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      ticks: { 
 
       min: 0, 
 
       max: 8, 
 
       padding: 10 
 
      }, 
 
      gridLines: { 
 
       color: '#888', 
 
       drawOnChartArea: false 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
 
<canvas id="ctx"></canvas>

^{Note: ceci est juste un exemple, et vous pouvez le personnaliser plus loin pour répondre à vos besoins, en suivant les official documentation.}