chart.js 如果值相同，条形图就会消失

Question

我有这个代码（从 W3Schools 借用并修改）。我在 Chrome 和 Edge 上看到的问题是一些条消失了，如果后续值与第一个条相同（例如意大利 = 2 法国 = 2，西班牙 = 2），似乎就会发生这种情况。代码有错吗？有解决办法吗？这是 Chart.js 的错误吗？

更新 - 经过更多尝试后，似乎更多的是它的值“2”有问题。

这是一个jsfiddle：JS Fiddle 消失条

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
const xValues = ["Italy", "France", "Spain", "USA"];
const yValues = [2, 2, 3, 14];
const barColors = ["red", "green","blue","orange","brown"];

new Chart("myChart", {
  type: "horizontalBar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    }
  }
});
</script>

</body>
</html>

Answer 1

如果仔细阅读图表，您可以看到x轴值的起始值为2。

enter image description here

因此，当你的值为2时，肯定不会显示任何条形如

2 === 2

，它不会超过最小x轴。

您必须用

scales.xAxes[0].ticks.min

覆盖最小 x 轴值。参考：最小最大配置

new Chart("myChart", {
  type: "horizontalBar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues,
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    },
    scales: {
      xAxes: [{
        ticks: {
            min: 0,
            //max: 20
        }
      }]
    }
  }
});

enter image description here

演示@StackBlitz

chart.js 如果值相同，条形图就会消失

问题描述投票：0回答：1

1个回答

最新问题

chart.js 如果值相同，条形图就会消失

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1