Chart.js stepSize无法与分钟一起使用 [英] Chart.js stepSize not working with min

查看:51
本文介绍了Chart.js stepSize无法与分钟一起使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

min.

包括小提琴- https://jsfiddle.net/4p93aew7/10/

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 23, 15, 32, 33],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [17, 11, 25, 18, 13, 37],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 5,
          max: 40,
          stepSize: 8
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

在示例中,步长为8,最小值为5,因此每个步长应为8 (从5开始),但显然不是.我该如何解决?

In the example, step size is 8 and min is 5, so each step should be 8 starting from 5 but it clearly isn't. How do I fix this?

编辑:适用于那些希望关注此问题的人.这是一个 github 链接

Edit: For those who wants to follow this issue. Here is a github link

推荐答案

您要强制使用 min max stepSize 不能一起工作.自动缩放算法正在尽最大努力实现您的要求,但是必须付出一些努力.

You're forcing a min, a max, and a stepSize that don't work together. The auto-scaling algorithm is doing its best achieve what you ask, but something has to give.

如果您真的希望它可以正常工作,则需要确保范围( max - min )可以被 stepSize 整除.例如:

If you really want it work cleanly you need to ensure the range (max-min) is cleanly divisible by the stepSize. E.g.:

40-5 = 35
35/7 = 5

5是一个整数,所以可以使用刻度.

5 is a whole number, so the scale will work.

35/8 = 4.375

4.375不是整数,因此刻度不起作用.

4.375 isn't a whole number so the scale won't work.

如果您将 max 设为45,那么

If you make max 45 then

45-5 = 40
40/8 = 5

同样,5是一个整数,小数位数将起作用.

Again, 5 is a whole number and the scale will work.

这篇关于Chart.js stepSize无法与分钟一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆