条形图的某些条形图正从Chart.js中消失

Question

我正在尝试使用Chart.js创建一个图表，我正在制作一个条形图，只需添加一些数据，其中一些就会消失。我意识到当我在日期字段中输入相等的值时，会发生这种情况。有人能帮我吗？请？

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Janeiro", "Fevereiro", "Março", "Abril"],
      datasets: [
          {
              label: "Indicados",
              yAxisID: 'yAxis1',
              backgroundColor: "#56D9FE",
              data: [5,3,3,4]
          },
          {
              label: "Instalados",
              yAxisID: 'yAxis1',
              backgroundColor: "#5FE3A1",
              data: [3,4,6,4]
          },
          {
              label: "Vendas",
              yAxisID: 'yAxis2',
              backgroundColor: "#A3A0FB",
              data: [50, 45, 80, 60]
          },
          {
              label: "Bônus",
              yAxisID: 'yAxis2',
              backgroundColor: "#FEC163",
              data: [30, 10, 25, 35],
          }
      ]
    },
    options: {
      responsive: true, //responsividade
      maintainAspectRatio: true,
      lineWidth: 0.1,
      aspectRatio: 3, //tamanho
      legend: {
        display: true,
        position: 'bottom' // Posição das legendas
      },
      scales: {
          yAxes: [
              {
                  id: 'yAxis1',
                  position: 'left'
              },
              {
                  id: 'yAxis2',
                  position: 'right'
              }
          ]
      }
    }

  });

This is the buggy chart

Answer 1

您不需要为数据集指定yAxis（如果您只有2个数据集，这将是您所做的好事），无论如何，如果您正在创建垂直图表，您将向yAxis添加数据，在这种情况下，它只会覆盖您的数据。从数据集中删除yAxisID: 'yAxis1'和yAxisID: 'yAxis2'。它会工作的。

你需要的是：

   ticks: {
       max: 80,
       min: 0
   }

将此添加到您的yAxis conf中，它看起来像：

scales: {
      yAxes: [
          {
              id: 'yAxis1',
              position: 'left',
              ticks: {
                  max: 80,
                  min: 0
              }
          },
          {
              id: 'yAxis2',
              position: 'right',
              ticks: {
                  max: 80,
                  min: 0
              }
          }
      ]
  }