Question

在您的出色帮助下跳过了一些障碍here之后，我遇到了一个新问题：

我正在获取一个json对象，并希望在chart.js中将其可视化。

几乎可以使用（tm），但仅显示第一个数据点。我想这与“ total”数组中缺少的撇号有关，请参见所附的firefox屏幕截图。

那么，有两个问题：为什么“总计”数组的结构与“标签”数组不同？而我该如何做呢？

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>

Answer 1

正如@MichaelJasper所指出的，我必须添加

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

到我图表的选项。

没有用括号分隔的Object.values / Chartjs仅显示数组的第一个元素

1 个答案: