Les options de Chartjs sont ignorées

Question

Les options de Chartjs sont ignorées

Demandé el 22 de Juin, 2021: Quand la question a-t-elle été
43 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'utiliser un simple ChartJS sur mon site, mais toutes les options sont ignorées. Ma question ressemble donc à ceci ce mais pour autant que je puisse dire, j'ai les options au bon endroit.

Voici donc le code (très simple) :

JS

let config01 = {
    type: 'doughnut',
    data: {
      labels: [
        'Part 01',
        'Part 02',
        'Part 03'
      ],
      datasets: [
        {
          data: [2000, 1000, 600],
          backgroundColor: [
            'rgb(0, 76, 138)',
            'rgb(50, 151, 230)',
            'rgb(250, 202, 55)',
          ],
          hoverOffset: 10
        }
      ]
    },
    options: {
      legend: {
        position: 'bottom',
        color: '#000000',
        labels: {
          usePointStyle: true,
        }
      },
      animation: {
        duration: 1000,
        easing: "linear"
      },
      title: {
        display: true,
        text: 'Some Title',
        fontColor: 'rgb(0, 18, 58)',
        fontSize: '18',
        padding: 5
      }
    }
  };

var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);

HTML

 <body>
  <div>
    <canvas id="myChart-01" width="200px" height="200px"></canvas>
  </div>
 </body>

Et voici un fonctionnement (sans que les options soient appliquées) violon .

Demandé el 22 de Juin, 2021 par SunnyRed

Answer 1

2 Réponses

Answer 2

2voto

Joundill Points 690

legend y title sont destinés à être dans options.plugins :

options: {
  plugins: {
    legend: {
      position: 'bottom',
      color: '#000000',
      labels: {
        usePointStyle: true,
      }
    },
    title: {
      display: true,
      text: 'Some Title',
      fontColor: 'rgb(0, 18, 58)',
      padding: 5,
      font: {
        size: '18'
      }
    }
  },
  animation: {
    duration: 1000,
    easing: "linear"
  }
}

Répondu el 22 de Juin, 2021 par Joundill (690 Points )

Answer 3

2voto

LeeLenalee Points 3461

Comme défini dans chaque partie de la docs pour cette chose spécifique ( https://www.chartjs.org/docs/master/configuration/legend.html#configuration-options ) vous pouvez voir l'espace de nom, dans lequel vous pouvez voir que le titre et la légende doivent être configurés dans la section des plugins puisqu'ils sont des plugins internes, ceci est également indiqué dans les docs de migration ( https://www.chartjs.org/docs/master/getting-started/v3-migration.html )

Exemple de travail en direct :

let config01 = {
  type: 'doughnut',
  data: {
    labels: [
      'Part 01',
      'Part 02',
      'Part 03'
    ],
    datasets: [{
      data: [2000, 1000, 600],
      backgroundColor: [
        'rgb(0, 76, 138)',
        'rgb(50, 151, 230)',
        'rgb(250, 202, 55)',
      ],
      hoverOffset: 10
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'bottom',
        color: '#000000',
        labels: {
          usePointStyle: true,
        }
      },
      title: {
        display: true,
        text: 'Some Title',
        font: {
          color: 'rgb(0, 18, 58)',
          size: 5
        },
      }
    },

    animation: {
      duration: 1000,
      easing: "linear"
    },

  }
};

var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);

div {
  max-width: 200px;
  max-height: 200px;
}

<div>
  <canvas id="myChart-01" width="200px" height="200px"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
</div>

Répondu el 22 de Juin, 2021 par LeeLenalee (3461 Points )

Les options de Chartjs sont ignorées

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Les options de Chartjs sont ignorées

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: