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

46qrfjad 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(276)

目前尝试在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
            }
        }
    }
});

chart.js

来源：https://stackoverflow.com/questions/73773757/bar-chart-bars-not-showing-up-in-chart-js

2条答案

按热度按时间

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
            }
        }
    }
});

赞(0）回复(0）举报 2022-11-06

yx2lnoni2#

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

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

赞(0）回复(0）举报 2022-11-06

我来回答

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

2条答案

相关问题

热门标签

最新问答