垂直条形图未正确显示答案

【问题标题】：Vertical Bar Chart not displaying Correctly垂直条形图未正确显示
【发布时间】：2021-08-19 13:25:31
【问题描述】：

垂直条形图：

我想在上面的链接中实现这个垂直条形图图像，但我的代码结果显示的是一个正常的条形图。这是我用来生成图表的代码的 sn-p：

<template name="VerticalCharts">
<div class="profile-user-box">
    <canvas id="myCharts"></canvas>
</div>
</template>

Template.VerticalCharts.onRendered(function() {

    var ctx = document.getElementById('myCharts').getContext('2d');
    var myCharts = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    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, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                  legend: {
                    position: 'top',
                  },
                  title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                  }
                }
              },
        });
});

【问题讨论】：

给我看看你当前的聊天截图。
您的图像是垂直图表。给我看看你当前的图表。
对于垂直图表，它需要有负数和正数的数据。
@VadimOrlov212 这是图片的链接ibb.co/tpYsT87，（为我显示的内容）
垂直条形图有负数数据吗？你的数据是正数。

标签： javascript meteor chart.js bar-chart

【解决方案1】：

你有一个垂直条形图，如果你想要水平条，你需要在你的选项对象中将indexAxis 设置为'y'，如下所示：

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    indexAxis: 'y'
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

【讨论】：

好的，谢谢。我想要水平和垂直。这意味着我将同时设置负数据和正数据