web-dev-qa-db-fra.com

Légende d'affichage ChartJS

Je suis nouveau dans ChartJS et j'ai quelques problèmes avec la légende. J'ai un graphique à barres simple avec seulement 3 barres comme:

<div class="x_panel">
    <div class="x_title">
        <h2>Bar graph</h2>
        <ul class="nav navbar-right panel_toolbox" style="padding-left:5%">
            <li>
                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li>
                <a class="close-link"><i class="fa fa-close"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <canvas id="mybarChart"></canvas>
    </div>
</div>

pour lequel j'essaie d'afficher la légende sous le graphique comme dans l'image ci-jointe Example

 var mybarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: '# of Votes',
                backgroundColor: "#000080",
                data: [80]
            }, {
                label: '# of Votes2',
                backgroundColor: "#d3d3d3",
                data: [90]
            },
            {
                label: '# of Votes3',
                backgroundColor: "#add8e6",
                data: [45]
            }]
        },

        options: {
            legend: {
                display: true,
                labels: {
                    fontColor: "#000080",
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

Mais mon graphique affiché est vide :( J'ai également essayé d'afficher la légende en ajoutant un autre div sous la toile et en l'appelant par:

document.getElementById('barlegend').innerHTML = mybarChart.generateLegend();

avec le même résultat :(

Qu'est-ce que je fais mal?

bar-chartchart.js
6
Dana

D'après le code que vous avez fourni dans votre question, il semble que vous ayez oublié d'ajouter des données labels dans votre objet de données de graphique. Sans ces informations, chartjs n'est pas en mesure de générer votre axe et de lui mapper chaque donnée de jeu de données.

De plus, comme vous avez mentionné que vous vouliez que la légende soit en dessous du graphique, j'ai ajouté le display: bottom option. Voici le code de travail.

var ctx = document.getElementById("mybarChart").getContext("2d");

var mybarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Votes'],
    datasets: [{
      label: '# of Votes',
      backgroundColor: "#000080",
      data: [80]
    }, {
      label: '# of Votes2',
      backgroundColor: "#d3d3d3",
      data: [90]
    }, {
      label: '# of Votes3',
      backgroundColor: "#add8e6",
      data: [45]
    }]
  },

  options: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: "#000080",
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Voici également un exemple de codepen fonctionnel .

9
jordanwillis