Object.values ​​не разделены круглыми скобками / Chartjs отображает только первый элемент массива - PullRequest
Новая
       37

Object.values ​​не разделены круглыми скобками / Chartjs отображает только первый элемент массива

0 голосов
/ 22 октября 2018

после преодоления нескольких препятствий здесь с вашей замечательной помощью у меня появилась новая проблема:

Я беру объект json и хочу визуализировать его в chart.js.

Это почти работает (тм), но отображается только первая точка данных.Я полагаю, что это как-то связано с отсутствующими апострофами в массиве «total», см. Прикрепленный скриншот из Firefox.

Итак, два вопроса: почему массив «total» отличается от «label»?массив?И как мне сделать эту работу? 

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>

graph screenshot in firefox

1 Ответ

0 голосов
/ 28 октября 2018

Как указал @MichaelJasper, мне пришлось добавить 

            // scales: {
        //   yAxes: [{
        //     ticks: {
        //             beginAtZero:true}
        //   }]
        // }
к опциям моей диаграммы.
...