javascript - 为什么这些 2.9 ChartJS 条形图不一样？

Question

使用 ChartJS 2.9.4，为什么这 2 个图表不同？

<div >
    <canvas id="topcanvas"></canvas>
    <canvas id="bottomcanvas"></canvas>
</div>

        var leftdata = {
          labels: [0, 1, 2, 3, 4, 5], 
          datasets: [{
              label: "A",
              backgroundColor: 'rgba(0, 0, 255, 0.5)',
              data: [12, 19, 3, 5, 1],
              xAxisID: "A"
            },
            {
              label: "B",
              backgroundColor: 'rgba(0, 255, 0, 0.5)',
              data: [14, 19, 6, 2, 4],
              xAxisID: "B"
            }
          ]
        };
        
        var rightdata = {
          labels: [0, 1, 2, 3, "4", 5], // the #4 being a string is the only difference
          datasets: [{
              label: "A",
              backgroundColor: 'rgba(0, 0, 255, 0.5)',
              data: [12, 19, 3, 5, 1],
              xAxisID: "A"
            },
            {
              label: "B",
              backgroundColor: 'rgba(0, 255, 0, 0.5)',
              data: [14, 19, 6, 2, 4],
              xAxisID: "B"
            }
          ]
        };

        var options = {
          scales: {
            xAxes: [{
                id: "A",
                display: false,
                barPercentage: 1.25,
                ticks: {
                  max: 4 
                }
              },
              {
                id: "B",
                display: false,
                stacked: true,
                offset: true,
                barPercentage: 1.25,
                ticks: {
                  max: 4
                }
              },
              {
                display: true,
                ticks: {
                  autoSkip: false,
                  max: 5 
                }
              }
            ],

            yAxes: [{
              id: "bar-y-axis1",
              ticks: {
                beginAtZero: true
              }
            }]

          }
        };

        var leftctx = document.getElementById("topcanvas").getContext("2d");
        new Chart(leftctx, {
          type: 'bar',
          data: leftdata,
          options: options
        });
        var rightctx = document.getElementById("bottomcanvas").getContext("2d");
        new Chart(rightctx, {
          type: 'bar',
          data: rightdata,
          options: options
        });

链接到 JSFiddle

标签： javascriptchart.js

Answer 1

此行为已在 lib 的 v3 中修复

var leftdata = {
  labels: [0, 1, 2, 3, 4, 5],
  datasets: [{
      label: "A",
      backgroundColor: 'rgba(0, 0, 255, 0.5)',
      data: [12, 19, 3, 5, 1],
      xAxisID: "A"
    },
    {
      label: "B",
      backgroundColor: 'rgba(0, 255, 0, 0.5)',
      data: [14, 19, 6, 2, 4],
      xAxisID: "B"
    }
  ]
};

var rightdata = {
  labels: [0, 1, 2, 3, "4", 5], // the #4 being a string is the only difference
  datasets: [{
      label: "A",
      backgroundColor: 'rgba(0, 0, 255, 0.5)',
      data: [12, 19, 3, 5, 1],
      xAxisID: "A"
    },
    {
      label: "B",
      backgroundColor: 'rgba(0, 255, 0, 0.5)',
      data: [14, 19, 6, 2, 4],
      xAxisID: "B"
    }
  ]
};

var options = {
  scales: {
    A: {
      display: false,
      barPercentage: 1.25,
      ticks: {
        max: 4
      },
      position: 'bottom'
    },
    B: {
      display: false,
      stacked: true,
      offset: true,
      barPercentage: 1.25,
      position: 'bottom',
      ticks: {
        max: 4
      }
    },
    x: {
      display: true,
      ticks: {
        autoSkip: false,
        max: 5
      }
    },

    y: {
      id: "bar-y-axis1",
      ticks: {
        beginAtZero: true
      }
    }

  }
};

var leftctx = document.getElementById("topcanvas").getContext("2d");
new Chart(leftctx, {
  type: 'bar',
  data: leftdata,
  options: options
});
var rightctx = document.getElementById("bottomcanvas").getContext("2d");
new Chart(rightctx, {
  type: 'bar',
  data: rightdata,
  options: options
});

<div class="grid">
  <canvas id="topcanvas"></canvas>
  <canvas id="bottomcanvas"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</div>