[英]Hide min and max values from y Axis in Chart.js
I have assigned the min and max of Y axes with the tick configuration.But I do not want these min max values to be shown in the graph.I need to hide these values at both the ends我已经用刻度配置分配了 Y 轴的最小值和最大值。但我不希望这些最小值显示在图中。我需要在两端隐藏这些值
ticks:
{
callback: function(value){
returnparseFloat(value.toFixed(2))
},
min: y1_min,
max: y1_max,
fontColor: "#000000",
fontSize: 12
}, },
In order to hide specific ticks (in your case the first and last tick), you have to use the scale afterTickToLabelConversion
callback property and set the value = null
of the tick indexes within scaleInstance.ticks
that you are wanting to hide.为了隐藏特定的刻度(在您的情况下是第一个和最后一个刻度),您必须使用scale
afterTickToLabelConversion
回调属性,并在scaleInstance.ticks
中设置要隐藏的刻度索引的value = null
。 This will prevent them from being drawn on the canvas.这将防止它们被绘制在画布上。
Here is an example that hides the first and last tick (by setting their values = null).这是一个隐藏第一个和最后一个刻度的示例(通过设置它们的值 = null)。
afterTickToLabelConversion: function(scaleInstance) {
// set the first and last tick to null so it does not display
// note, ticks[0] is the last tick and ticks[length - 1] is the first
scaleInstance.ticks[0] = null;
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
// need to do the same thing for this similiar array which is used internally
scaleInstance.ticksAsNumbers[0] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
}
You can see it in action on this codepen example您可以在此codepen 示例中看到它的实际效果
Hiding the max worked this way for me (ng2-charts): I return undefined instead of value to hide tick's value & line隐藏最大值对我来说是这样的(ng2-charts):我返回 undefined 而不是 value 来隐藏刻度线的值和线
scales: {
yAxes: [{
ticks: {
callback: (value, index, values) => (index == (values.length-1)) ? undefined : value,
},
... ...
When using the plugin chartjs-plugin-zoom I only wanted to remove those ticks if they had decimals, as it created a flickering effect when panning.使用插件 chartjs-plugin-zoom 时,我只想删除那些有小数的刻度,因为它在平移时会产生闪烁效果。
Implementation:执行:
afterTickToLabelConversion: (scaleInstance) => {
if (scaleInstance.ticks[0].indexOf(".") > -1) {
scaleInstance.ticks[0] = null;
scaleInstance.ticksAsNumbers[0] = null;
}
if (scaleInstance.ticks[scaleInstance.ticks.length - 1].indexOf(".") > -1) {
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.