图表的最小值(Chart.js)

Question

我用Chart.js做了一个图表，它在工作，但是，我搜索设置一个最小值(例如0)，但是我做不到。

我的代码：

    <script type="text/javascript">
var NbCanvas = document.getElementById("NbTicketsChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var densityData = {
    label: 'Nombre de tickets sur la semaine',
    data: [20, 25, 30, 25, 30, 35, 40],
    backgroundColor: '#336ca6'

};
var barChart = new Chart(NbCanvas, {
type: 'bar',
data: {
labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
datasets: [densityData],
options:{
        scales: {
            yAxes : [{
                ticks : {
                    max : 100,    
                    min : 0
                }
            }]
        }
    }
}

});
</script>

我试着这样做：

  options:{
    scales: {
        yAxes : [{
            ticks : {
                max : 100,    
                min : 0
            }
        }]
    }
 }
}

感谢您的阅读！亚瑟

Answer 1

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="NbTicketsChart" width="50" height="50"></canvas>
<script>
  var NbCanvas = document.getElementById("NbTicketsChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  var densityData = {
      label: 'Nombre de tickets sur la semaine',
      data: [20, 25, 30, 25, 30, 35, 40],
      backgroundColor: '#336ca6'

  };
  var barChart = new Chart(NbCanvas.getContext('2d'), {
    type: 'bar',
    data: {
    labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
    datasets: [densityData]
  }});

  barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}}
</script>

这是个不错的解决方案，但不适用于char.js 2.8我用的是2.7

​

Answer 2

这让我有点沮丧。根据文档，您的方法似乎应该是有效的。我只能在创建图表后通过设置比例来使其工作，如下所示：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="NbTicketsChart" width="50" height="50"></canvas>
<script>
  var NbCanvas = document.getElementById("NbTicketsChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  var densityData = {
      label: 'Nombre de tickets sur la semaine',
      data: [20, 25, 30, 25, 30, 35, 40],
      backgroundColor: '#336ca6'

  };
  var barChart = new Chart(NbCanvas.getContext('2d'), {
    type: 'bar',
    data: {
    labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
    datasets: [densityData]
  }});

  barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}}
</script>

​

在张贴这篇文章时，我还注意到当画布大小为400x400时，它不起作用。50乘50似乎行得通...