Chart.js中未显示条形图条形

46qrfjad  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(308)

目前尝试在HTML/Javascript中创建一个条形图。由于某些原因,似乎无法显示条形图。以下是代码和image.


图表显示,但不是实际的酒吧。猜测这是一个数据问题,但我已经被难倒了很长时间。任何帮助是非常感谢!
HTML语言

<canvas id="myChart"></canvas>

JS系统

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    label: ['Red','Blue','Yellow','Green','Purple','Orange'],
    datasets: [{
      label: 'number of votes',
      data: [1,2,3,4,5,6],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderWidth: 1
    }]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
vwoqyblh

vwoqyblh1#

您必须使用labels而不是label作为条形标签。请参阅官方文档:LINK
所以你的JS看起来像这样(见第5行的变化):

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
    datasets: [{
      label: 'number of votes',
      data: [1,2,3,4,5,6],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderWidth: 1
    }]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
yx2lnoni

yx2lnoni2#

这是一个基本的打字错误。它应该是“标签”,而你写的是“标签”。

data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{

相关问题