ChartJS 栏未显示简单数据点答案

【问题标题】：ChartJS bar not showing up for simple data pointsChartJS 栏未显示简单数据点
【发布时间】：2017-07-24 04:41:31
【问题描述】：

这是我正在使用的一个简单的 chart.js 水平条形图：

var myBarChart = new Chart(ctx,{
  type: 'horizontalBar',
  data: {
    labels: [
        "Foo",
        "Bar",
        "Baz"
    ],
    datasets: [
    {
        data: [725000, 600000, 900000],
        backgroundColor: [
          "#ccf6ec",
          "#ff6654",
          "#009784"
        ],
        hoverBackgroundColor: [
          "#ccf6ec",
          "#ff6654",
          "#009784"
        ]
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        display: false
      }],
    }
  }
});

如果我将值更改为彼此更接近，我会看到三个条形。我需要它来绘制条形图，以便它们始终可见，即使值相差很大。

有没有我错过的配置？我该如何解决这个问题？

【问题讨论】：

标签： javascript bar-chart chart.js

【解决方案1】：

由于某种原因，chart.js 使用数据中的最小数量作为最小刻度值。只需添加ticks.min: 0 显然可以解决问题：

var ctx = document.getElementById('chart')
var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: [
      "Foo",
      "Bar",
      "Baz"
    ],
    datasets: [{
      data: [725000, 600000, 900000],
      backgroundColor: [
        "#ccf6ec",
        "#ff6654",
        "#009784"
      ],
      hoverBackgroundColor: [
        "#ccf6ec",
        "#ff6654",
        "#009784"
      ]
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false,
        ticks: {
          min: 0
        }
      }],
      yAxes: [{
        display: false
      }],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

【讨论】：