没有用括号分隔的Object.values/Chartjs仅显示数组的第一个元素 [英] 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:
我正在获取一个json对象，并希望在chart.js中将其可视化.
I am taking a json object and want to visualize it in chart.js.
几乎可以使用(tm)，但仅显示第一个数据点.我想这与"total"数组中缺少的撇号有关，请参见所附的firefox屏幕截图.
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>
推荐答案
正如@MichaelJasper指出的那样，我必须添加
As @MichaelJasper pointed out, I had to add
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero:true}
// }]
// }
到我图表的选项.
to the options of my diagram.
这篇关于没有用括号分隔的Object.values/Chartjs仅显示数组的第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
