ChartJS display Legende

Ich bin neu in ChartJS und ich habe einige Probleme mit der Legende. Ich habe ein einfaches Balkendiagramm mit nur 3 bars wie:

<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>

für die ich versuche, um die Anzeige der Legende unter dem Diagramm wie in dem angehängten Bild ChartJS display Legende

 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
                    }
                }]
            }
        }
    });

Angezeigt, aber meine Karte ist leer 🙁
Ich hab auch schon versucht die Anzeige der Legende durch das hinzufügen eines weiteren div-Gebrüll die Leinwand und den Aufruf von:

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

mit dem gleichen Ergebnis 🙁

Was mache ich falsch?

InformationsquelleAutor Dana | 2017-03-13

  1. 6

    Basiert auf dem code, die Sie angegeben haben in Ihrer Frage, es sieht aus wie Sie vergessen haben, fügen Sie labels Daten in Ihrem Diagramm-Daten-Objekt. Ohne diese Informationen chartjs ist nicht zu erzeugen in der Lage Ihre Achse und Zuordnung der einzelnen dataset-Daten.

    Auch, da Sie erwähnten, Sie wollten die Legende unter dem Diagramm habe ich noch display: bottom option. Hier ist der funktionierende code.

    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
        }
      }]
    }
  }
});

    Hier ist eine funktionierende codepen-Beispiel als gut.

    InformationsquelleAutor jordanwillis

Schreibe einen Kommentar