ChartJS 图表的y轴最小值为0,但不总是显示

flvlnr44  于 2023-03-29  发布在  Chart.js
关注(0)|答案(1)|浏览(239)

所以我遇到了这个问题,我希望折线图的最低y轴值为0(没有负数),但是当我有数据集值时,比如说,以千、十万、百万等为单位,折线图的曲线停留在顶部,因为最低y轴值为0。示例:

我不知道这是否可行,但我想做的是y轴的最低值,更接近数据集的最低值,同时y轴的最低值最远为0。
以下是我目前所做的工作:

new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            elements: {
                line: {
                    tension: 0.4
                },
            },
            scales: {
                x: {
                    grid: {
                        display:false
                    }
                },
                y: {
                    ticks: {
                        maxTicksLimit: 25,
                        autoSkip: true,
                        callback: function(value) {if (value % 1 === 0 && value >= 0) {return value;}}
                    },
                }
            }
        },
    });

提前感谢您抽出宝贵时间!

wnrlj8wa

wnrlj8wa1#

您可以使用min属性。计算将基于您的要求,但您可以将下面的示例作为参考。我从我的数据集中获取最小值,并将其减去一些预定义的值(例如1000)。

const ctx = document.getElementById('myChart');
  
  const data = [36000, 34650, 30205, 35555, 36632, 37092, 38990];

  let min = Math.min(...data);
    min = min < 0 ? 0 : min - 1000;
  
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
      datasets: [{
        label: 'My First Dataset',
        data: data,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    },
    options: {
      elements: {
        line: {
          tension: 0.4
        },
      },
      scales: {
        x: {
          grid: {
            display: false
          }
        },
        y: {
          min: min,
          ticks: {
            maxTicksLimit: 25,
            autoSkip: true,
            callback: function(value) {
              if (value % 1 === 0 && value >= 0) {
                return value;
              }
            }
          },
        }
      }
    }
  });
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

相关问题