Forum : Créer un doughnut chart en html

Je souhaite créer un doughnut chart depuis des données Google Sheet + ajouter des images.

<!doctype html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div>
  <canvas id="myChart"></canvas>
</div>

<script>
  google.charts.load('current', {
    'packages': ['corechart', 'bar']
  });
  google.charts.setOnLoadCallback(initChart);

  function initChart() {
    URL = "https://docs.google.com/spreadsheets/d/1NctT4dKUAX2o-d-8WtzaBSS1OVdiGxvEKiH21cs8058/edit?usp=sharing";
    var query = new google.visualization.Query(URL);
    query.setQuery('select *');
    query.send(function(response) {
      handleQueryResponse(response);
    });
  }

  function handleQueryResponse(response) {
    var data = response.getDataTable();
    var columns = data.getNumberOfColumns();
    var rows = data.getNumberOfRows();
    console.log(data.toJSON());

    const colors = ['rgb(54, 162, 235)', 'rgb(255, 99, 132)', 'rgb(75, 192, 192)', 'rgb(255, 206, 86)', 'rgb(153, 102, 255)'];
    dataj = JSON.parse(data.toJSON());
    console.log(dataj.cols[0].label);
    const labels = [];
    for (c = 1; c < dataj.cols.length; c++) {
      if (dataj.cols[c].label != "") {
        labels.push(dataj.cols[c].label);
      }

    }
    console.log(labels);
    const datasets = [];
    for (i = 0; i < dataj.rows.length; i++) {
      const series_data = [];
      for (j = 1; j < dataj.rows[i].c.length; j++) {
        if (dataj.rows[i].c[j] != null) {
          if (dataj.rows[i].c[j].v != null) {
            series_data.push(dataj.rows[i].c[j].v);
          } else {
            series_data.push(0);
          }
        }

      }
      var dataset = {
        label: dataj.rows[i].c[0].v,
        backgroundColor: colors[i],
        borderColor: colors[i],
        data: series_data
      }

      datasets.push(dataset);

    }
    console.log(datasets);

    const chartdata = {
      labels: labels,
      datasets: datasets
    };
    var canvas = document.getElementById("myChart");
    var setup = {
      type: 'doughnut',
      data: chartdata,
      options: {
        plugins: {
          title: {
            display: true,
            text: dataj.cols[0].label
          }
        },
        responsive: true,
      }
    }
    chart = new Chart(canvas, setup);

  }
</script>
</html>

Ce que je veux

J'ai repris un html existant, mais je souhaite le faire que le graphique soit en Doughnut.
Il y a 5 lignes avec 5 données.
De plus je souhaite mettre des images sur chaque élément du doughnut.

Ce que j'obtiens

J'obtiens un doughnut mais les données sont superposées...
Je ne sais pas comment intégrer des .png

Merci pour votre aide...

Créer un doughnut chart en html

Aucune réponse