Object.values not seperated by parentheses / Chartjs only displays first element of array

问题

after jumping a few hurdles here with your wonderful help, I have a new problem:

I am taking a json object and want to visualize it in chart.js.

It almost works(tm), but only the first data point is shown. I suppose this has something to do with the missing apostrophes in the "total" array, kindly see attached screenshot from firefox.

So, two questions: why is the "total" array structured differently from the "labels" array? And how do I make this work?

console.log('hi');

$(document).ready(function () {
  $.ajax({
    url : "https://localhost/auswertung/data1.php",
    type : "GET",
    dataType : 'json',
    success: function (data) {
      console.log(data);


      var labels = Object.keys(data);
      var total = Object.values(data);
      console.log(labels);
      console.log(total);

      var chartdata = {
        labels: labels,
        datasets : [
          {
            label: 'Frage 1',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: total
          }
        ]
      };
      var options = {
        responsive: true,
        title: {
          display: true,
          position: "top",
          text: "Bar Graph",
          fontSize: 18,
          fontColor: "#111"
        },
        legend: {
          display: true,
          position: "bottom",
          labels: {
            fontColor: "#333",
            fontSize: 16
          }
        },
        scales: {
          yAxes: [{
            ticks: {
                    beginAtZero:true}
          }]
        }
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options: options
      });
    },

    error: function(data) {
      console.log(data);
    }
  });
});

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Auswertung</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
	<script src="script.js" defer></script>

</head>
<body>
	<div>
			<canvas id="mycanvas"></canvas>	</div>

</body>
</html>

回答1:

As @MichaelJasper pointed out, I had to add

            // scales: {
        //   yAxes: [{
        //     ticks: {
        //             beginAtZero:true}
        //   }]
        // }

to the options of my diagram.

来源：https://stackoverflow.com/questions/52933309/object-values-not-seperated-by-parentheses-chartjs-only-displays-first-element

标签

javascript

arrays

json

object

chart.js