Question

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

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

}，

Answer 1

为了隐藏特定的刻度（在您的情况下是第一个和最后一个刻度），您必须使用scale afterTickToLabelConversion callback property并在其中设置刻度线索引的value = null你要隐藏的scaleInstance.ticks。这样可以防止它们被画在画布上。

这是一个隐藏第一个和最后一个刻度的示例（通过设置它们的值= 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 example

上看到它的实际效果

Answer 2

使用插件chartjs-plugin-zoom时，我只想删除那些带有小数点的刻度，因为它在平移时会产生闪烁效果。

实施：

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;
    }
}

Answer 3

隐藏最大值对我来说是这样（ng2-图表）：我返回undefined而不是value来隐藏刻度线的值和行

scales: {
      xAxes: [{
        ticks: {
          callback: (value, index, values) => (index == (values.length-1)) ? undefined : value,
        },

...

隐藏Chart.js中y轴的最小值和最大值

3 个答案: