web-dev-qa-db-fra.com

Comment créer une légende personnalisée dans ChartJS

Je dois créer une légende personnalisée pour mon graphique en anneau à l'aide de la bibliothèque ChartJS. J'ai créé un beignet avec une légende par défaut fournie par ChartJS, mais il me faut quelques modifications.

Je voudrais avoir une valeur au-dessus du nom de la voiture. De plus, je n'aime pas les légendes collantes, mais je veux les séparer des beignets pour pouvoir changer le style des polices, des cases (à côté du texte "Audi" par exemple)

Je sais qu'il existe des Générateur de légende mais je ne sais pas comment l'utiliser avec VueJS - car j'utilise VueJS en tant que cadre

Voici à quoi ressemble ma légende - http://imgur.com/a/NPUoi

Mon code:

Depuis le composant Vue où j'importe un composant en anneau:

<div class="col-md-6">
  <div class="chart-box">
    <p class="chart-title">Cars</p>
    <donut-message id="chart-parent"></donut-message>
  </div>
</div>

Javascript:

    import { Doughnut } from 'vue-chartjs'
    export default Doughnut.extend({

    ready () {


    Chart.defaults.global.tooltips.enabled = false;
    Chart.defaults.global.legend.display = false;

    this.render({
      labels: ['Audi','BMW','Ford','Opel'],
      datasets: [
        {
          label: 'Cars',
          backgroundColor: ['#35d89b','#4676ea','#fba545','#e6ebfd'],
          data: [40, 30, 20, 10]
        }
      ]
    }, 
    {
      responsive: true,
      cutoutPercentage: 75,
      legend: {
        display: true,
        position: "right",
        fullWidth: true,
        labels: {
          boxWidth: 10,
          fontSize: 14
        }
      },
      animation: {
        animateScale: true
      }
    })
  }
});
javascriptvue.jschart.jsvue-chartjs
3
Denis Lapadatovic

J'ai le même problème en essayant de comprendre la documentation et ce lien pourrait clarifier le processus de personnalisation des légendes:

https://codepen.io/michiel-nuovo/pen/RRaRRv

L'astuce consiste à suivre un rappel pour créer votre propre structure HTML et renvoyer cette nouvelle structure à ChartJS.

Dans l'objet Options:

legendCallback: function(chart) {
  var text = [];
  text.Push('<ul class="' + chart.id + '-legend">');
  for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.Push('<li><span style="background-color:' + 
    chart.data.datasets[0].backgroundColor[i] + '">');
      if (chart.data.labels[i]) {
      text.Push(chart.data.labels[i]);
    }
    text.Push('</span></li>');
  }
  text.Push('</ul>');
  return text.join("");
}

Deuxièmement, vous avez besoin d’un conteneur pour insérer le nouveau code HTML et utiliser la méthode myChart.generateLegend () pour obtenir le code HTML personnalisé:

$("#your-legend-container").html(myChart.generateLegend());

Après cela, si vous avez besoin, repérez les événements:

$("#your-legend-container").on('click', "li", function() {
  myChart.data.datasets[0].data[$(this).index()] += 50;
  myChart.update();
  console.log('legend: ' + data.datasets[0].data[$(this).index()]);
});

$('#myChart').on('click', function(evt) {
  var activePoints = myChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[0];
  if (firstPoint !== undefined) {
    console.log('canvas: ' + 
    data.datasets[firstPoint._datasetIndex].data[firstPoint._index]);
  } 
  else {
    myChart.data.labels.Push("New");
    myChart.data.datasets[0].data.Push(100);
    myChart.data.datasets[0].backgroundColor.Push("red");
    myChart.options.animation.animateRotate = false;
    myChart.options.animation.animateScale = false;
    myChart.update();
    $("#your-legend-container").html(myChart.generateLegend());
  }
}

Une autre solution que j'ai trouvée, si vous n'avez pas besoin de changer la structure HTMl dans la légende, vous pouvez simplement insérer le même code HTML dans votre conteneur de légende et le personnaliser à l'aide de CSS.

http://jsfiddle.net/vrwjfg9z/

J'espère que ça marche pour toi.

4
Italo Borges

Vous pouvez extraire le balisage de la légende.

data () {
  return {
     legendMarkup: ''
  }
},
ready () {
  this.legendMarkup = this._chart.generateLegend()
 }

Et dans votre modèle, vous pouvez le sortir.

<div class="legend" ref="legend" v-html="legendMarkup"></div>

this._chart est l'instance interne de chartjs dans vue-chartjs. Vous pouvez donc appeler toutes les méthodes chartjs qui ne sont pas exposées par vue-chartjs api dessus.

Cependant, vous pouvez également utiliser le générateur de légende. L'utilisation est la même en vue. Vous pouvez transmettre les options, utiliser les rappels, etc.

0
Jakub Juszczak