在chartJS中跳过y轴上的小数点
Posted
技术标签:
【中文标题】在chartJS中跳过y轴上的小数点【英文标题】：Skip decimal points on y-axis in chartJS 【发布时间】：2016-10-08 13:03:01 【问题描述】：我正在使用this 库在我的网络应用程序中绘制图表。问题是我的 y 轴上有小数点。你可以在下图中看到
有没有办法可以限制它只有数字？
这是我的代码
var matches = $("#matches").get(0).getContext("2d");
var data =
labels: labelsFromCurrentDateTillLastWeek,
datasets: [
label: "Last Weeks Matches",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: result
]
;
var options =
scaleLabel: function (label)
return Math.round(label.value);
;
var myLineChart = new Chart(matches,
type: 'bar',
data: data,
options: options
)
【问题讨论】：
【参考方案1】：更新：请查看来自 @DreamTeK 的更新答案，该答案显示了现在如何作为 chartjs api https://***.com/a/54006487/2737978 的一部分来完成此操作
在 chartjs 2.x 中，您可以将 userCallback 的选项传递给 yaxis 刻度字段。在此您可以检查标签是否为整数
这是一个例子
options =
scales:
yAxes: [
ticks:
beginAtZero: true,
userCallback: function(label, index, labels)
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label)
return label;
,
],
,
fiddle example
【讨论】：
这些图表是否有完整的文档指南？这个chartjs.org/docs/latest/charts/line.html 很详细，但没有提及 beginAtZero 等。 最佳解决方案。没有错误，没有问题 更简单的选择：chartjs.org/docs/latest/axes/radial/… @Chris 的问题是你所有的图表都将使用stepSize。如果您知道始终显示 1 到 5 之间的数据，这很好，但如果您显示 1 到 1000 之间的数据，它仍将使用相同的步长
这应该是一个简单的标志。恕我直言，这是一个非常普遍的用例，应该这样实现。【参考方案2】：
另一种选择是使用 fixedStepSize 选项，如下所示：
options =
scales:
yAxes: [
ticks:
fixedStepSize: 1
],
,
;
【讨论】：
这个应该就这么简单。不幸的是，此设置可防止在有大量数据时跳过某些点。例如，当值是从 0 到 1000 时，chart.js 将显示从 0 到 1000 的所有整数，而不是显示 e.g. 0、100、200 等 很高兴知道。所以本质上，它适用于值的范围被限制在可用空间内合理显示的范围内。 当前使用 2.7 和 'fixedStepSize' 应该是 'stepSize' 参见文档：chartjs.org/docs/latest/axes/radial/…。如果应用货币格式也不能很好地发挥作用。【参考方案3】：2019 年更新
现在可以使用precision 选项轻松实现：
ticks:
precision:0
根据documentation。
如果已定义且未指定 stepSize，则步长将四舍五入到这么多小数位。
示例
options:
scale:
ticks:
precision: 0
OR （单轴）
options:
scales:
xAxes: [
ticks:
precision: 0
]
【讨论】：
对于其他人，请注意，当用户悬停/点击图表中的某个点时，此属性似乎不会影响标签... 你应该把ticks放在哪里？
@tonix 它在选项/刻度/刻度中。我的帖子中有官方文档和示例的链接。
似乎不再适用于版本 3
这对我有用，谢谢【参考方案4】：
到最新版本时，此选项更改为
scales:
yAxes: [
ticks:
stepSize: 1,
beginAtZero: true,
,
],
,
【讨论】：
对于 Chart.js 2.9.4，stepSize 有效。谢谢！！【参考方案5】：
你可以yaxis optopn;
decimalsInFloat: 数字
当 y 轴上有浮动值时要显示的分数数。 注意：如果您在 yaxis.labels.formatter 中定义了自定义格式化函数，则不会有任何效果。
【讨论】：
【参考方案6】：我用这个：
yAxes: [
ticks:
callback: function(val)
return Number.isInteger(val) ? val : null;
]
注意：使用回调函数以获得更好的粒度控制。我们检查 val 是否是整数而不是浮点小数。如果是，我们返回值。如果不是，我们返回 null。
【讨论】：
【参考方案7】：最简单直接的解决方案是将这些配置添加到您的选项对象中：
scales:
yAxes: [
ticks:
precision: 0,
beginAtZero: true,
,
,
],
,
并根据带有分数的轴定义轴（在我的情况下是 yAxes）
【讨论】：
【参考方案8】：如果您的 chartjs 版本高于 2.8 您可以轻松使用精度：0
研究下面的例子
responsive: true,
maintainAspectRatio: false,
title:
display: true,
position: 'top',
text: 'Monthly Establish Documents Value',
fontSize: 25
,
scales:
xAxes: [
stacked: true,
scaleLabel:
display: true,
labelString: 'Months'
],
yAxes: [
stacked: true,
beginAtZero: true,
id: 'A',
scaleLabel:
display: true,
labelString: '$AUD'
,
stacked: false,
beginAtZero: true,
id: 'B',
gridLines:
display: false
,
scaleLabel:
display: true,
labelString: '#Clients '
,
position: 'right',
ticks:
min: 0,
precision: 0
]
```
【讨论】：
以上是关于在chartJS中跳过y轴上的小数点的主要内容，如果未能解决你的问题，请参考以下文章