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
              }
          }
      ]
  }

条形图的一些条形图从Chart.js中消失了

1 个答案: