在 Chart.js 中隐藏 y 轴的最小值和最大值-前端问题

Hide min and max values from y Axis in Chart.js(在 Chart.js 中隐藏 y 轴的最小值和最大值)

本文介绍了在 Chart.js 中隐藏 y 轴的最小值和最大值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经用刻度配置分配了 Y 轴的最小值和最大值.但我不希望这些最小值最大值显示在图表中.我需要在两端隐藏这些值

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

ticks:
{
    callback: function(value){
    returnparseFloat(value.toFixed(2))
},
min: y1_min,
max: y1_max,
fontColor: "#000000",
fontSize: 12

推荐答案

为了隐藏特定的刻度(在你的情况下是第一个和最后一个刻度)，你必须使用缩放 afterTickToLabelConversion 回调属性并设置 value = nullscaleInstance.ticks 中要隐藏的刻度索引的 个.这将阻止它们被绘制在画布上.

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. This will prevent them from being drawn on the canvas.

这是一个隐藏第一个和最后一个刻度的示例(通过设置它们的值 = null).

Here is an example that hides the first and last tick (by setting their values = 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;
}

您可以在这个 codepen 示例

这篇关于在 Chart.js 中隐藏 y 轴的最小值和最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！