我已经在html文件中创建了一个网页。我已使用chart.js插件显示条形图。但是，图表中仅显示数组的第一个值。这是我的index.html。
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8" />
<title>Hello</title>
<script src="/Chart.js" type="text/javascript"></script>
</head>
<body>
<h1>Battery Levels</h1>
<div>
<canvas id="myChart1" width="800" height="450"></canvas>
</div>
<script>
var batlevels = {
datasets: [{
data: [20, 40, 10, 30, 50],
backgroundColor: [
"#FF6384",
"#63FF84",
"#84FF63",
"#8463FF",
"#6384FF"
]
}]
};
// Get the context of the canvas element we want to select
var chart1 = document.getElementById("myChart1").getContext("2d");
new Chart(chart1, {
type: 'bar',
data: batlevels
});
</script>
</body>
</html>
有什么想法吗？
确保data元素包括labels定义。
var batlevels = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'My Dataset',
data: [20, 40, 10, 30, 50],
backgroundColor: ['#FF6384', '#63FF84', '#84FF63', '#8463FF', '#6384FF']
}]
};
new Chart(document.getElementById("myChart1"), {
type: 'bar',
data: batlevels,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart1" height="80"></canvas>