Javascript Y轴上的值消失（隐藏在标签下）

我使用ChartJS库创建折线图。不知何故，Y值上的值几乎是隐藏的。 我想知道如果我有一组数据，我如何动态地生成y值，这样它就不会隐藏我的y值，并且仍然会根据我的数据集选择自动缩放

这里是

var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[1510001367000、1510001379000、1510001415000、1510001427000]，
数据集：[
{
标签：“数据集1”，
填充：假，
背景颜色：“rgb（255，99，132）”，
数据：[72,72,72,72]
},
{
标签：“数据集2”，
填充：假，
背景颜色：“rgb（54162235）”，
数据：[70,70,70,70]
}
]
},
选项：{
回答：对
}
});
.myChartDiv{
宽度：600px；
高度：800px；
}


谢谢你的代码笔，总是有助于有这些在一个问题

通过添加以下比例选项，可以设置Y轴的最小/最大值：

options: {
      responsive: true,
      scales:{
        yAxes:[{
          ticks:{
            suggestedMin:69,
            suggestedMax:73
          }
        }]
      }
    }

这是一个叉子


始终可以将最小值和最大值分别计算为（最小值-1）和（最大值+1），以始终获得偏移量为1的值

更新：========================================

在您的CodePen中，您使用的是Chartjs 2.1.3，它现在是一个旧版本。以下是如何构建一个简单的插件，向线性字符最小值/最大值添加偏移量：

首先是插件：

// Define a plugin to provide data labels
Chart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all datasets
    chart.data.datasets.forEach(function(dataset){
      var newMax = Math.max.apply(null, dataset.data);
      var newMin = Math.min.apply(null, dataset.data); 
      max = newMax > max ? newMax : max;
      min = newMin > min ? min : newMin;
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

看看这个

数据偏移量为0.5的预览示例：

更新2================================

对插件进行小的更改，以便当一个数据集被隐藏时，其他数据集居中，图表可以正常运行：

Chart.pluginService.register({
  beforeUpdate: function(chart){
    console.log("beforeUpdate");
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all dataset
    chart.data.datasets.forEach(function(dataset){
      if(!dataset._meta[0].hidden){
        console.log(dataset)
        var newMax = Math.max.apply(null, dataset.data);
        var newMin = Math.min.apply(null, dataset.data); 
        max = newMax > max ? newMax : max;
        min = newMin > min ? min : newMin;
      }
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

Chart.pluginService.register({
更新前：功能（图表）{
控制台日志（“更新前”）；
//获取自定义的偏移量
var offset=chart.options.customOffset；
//如果偏移量未定义或小于0，则正常存在
如果（！offset | | offset<0）返回；
//预设最小值和最大值
var max=Number.MIN_值；
var min=Number.MAX_值；
//查找所有数据集的最小/最大值
chart.data.dataset.forEach（函数（数据集）{
如果（！dataset.\u meta[0]。隐藏）{
console.log（数据集）
var newMax=Math.max.apply（null，dataset.data）；
var newMin=Math.min.apply（null，dataset.data）；
max=newMax>max？newMax:max；
min=newMin>min？min:newMin；
}
});
//更改最小和最大刻度值
chart.options.scales.yAxes[0]。ticks.max=max+offset；
chart.options.scales.yAxes[0].ticks.min=min-offset；
}
});


更新3==================================

下面是一个插件，用于向图表中的所有Y轴添加偏移：

Chart.pluginService.register({
    beforeUpdate: function(chart){
      console.log("beforeUpdate");
      // get custom defined offset
      var offset = chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0
      if(!offset || offset < 0) return;
      var yAxes = chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        var axis = yAxes[i];
        var datasets = chart.data.datasets;
        var max = Number.MIN_VALUE;
        var min = Number.MAX_VALUE;
        var datasetsOnAxis = [];

        for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
          var dataset = datasets[j];
          var meta = chart.getDatasetMeta(j);
          if  (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset); 
        }

        for(var k=0; k<datasetsOnAxis.length; k++){
          var dataset = datasetsOnAxis[k]
          var newMax = Math.max.apply(null, dataset.data);
          var newMin = Math.min.apply(null, dataset.data);
          max = newMax > max ? newMax : max;
          min = newMin > min ? min : newMin;
        }
        axis.ticks.max = max + offset;
        axis.ticks.min = min - offset;   
      }
    }
});

Chart.pluginService.register({
更新前：功能（图表）{
控制台日志（“更新前”）；
//获取自定义的偏移量
var offset=chart.options.customOffset；
//如果偏移量未定义或小于0，则正常存在
如果（！offset | | offset<0）返回；
var yAxes=chart.options.scales.yAxes；
对于（var i=0；i
谢谢你的代码笔，总是有助于有这些在一个问题

通过添加以下比例选项，可以设置Y轴的最小/最大值：

options: {
      responsive: true,
      scales:{
        yAxes:[{
          ticks:{
            suggestedMin:69,
            suggestedMax:73
          }
        }]
      }
    }

这是一个叉子


始终可以将最小值和最大值分别计算为（最小值-1）和（最大值+1），以始终获得偏移量为1的值

更新：========================================

在您的CodePen中，您使用的是Chartjs 2.1.3，它现在是一个旧版本。下面是如何构建一个简单的插件，向线性字符最小/最大值添加偏移量：

首先是插件：

// Define a plugin to provide data labels
Chart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all datasets
    chart.data.datasets.forEach(function(dataset){
      var newMax = Math.max.apply(null, dataset.data);
      var newMin = Math.min.apply(null, dataset.data); 
      max = newMax > max ? newMax : max;
      min = newMin > min ? min : newMin;
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

看看这个

数据偏移量为0.5的预览示例：

更新2================================

对插件进行小的更改，以便当一个数据集被隐藏时，其他数据集居中，图表可以正常运行：

Chart.pluginService.register({
  beforeUpdate: function(chart){
    console.log("beforeUpdate");
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all dataset
    chart.data.datasets.forEach(function(dataset){
      if(!dataset._meta[0].hidden){
        console.log(dataset)
        var newMax = Math.max.apply(null, dataset.data);
        var newMin = Math.min.apply(null, dataset.data); 
        max = newMax > max ? newMax : max;
        min = newMin > min ? min : newMin;
      }
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

Chart.pluginService.register({
更新前：功能（图表）{
控制台日志（“更新前”）；
//获取自定义的偏移量
var offset=chart.options.customOffset；
//如果偏移量未定义或小于0，则正常存在
如果（！offset | | offset<0）返回；
//预设最小值和最大值
var max=Number.MIN_值；
var min=Number.MAX_值；
//查找所有数据集的最小/最大值
chart.data.dataset.forEach（函数（数据集）{
如果（！dataset.\u meta[0]。隐藏）{
console.log（数据集）
var newMax=Math.max.apply（null，dataset.data）；
var newMin=Math.min.apply（null，dataset.data）；
max=newMax>max？newMax:max；
min=newMin>min？min:newMin；
}
});
//更改最小和最大刻度值
chart.options.scales.yAxes[0]。ticks.max=max+offset；
chart.options.scales.yAxes[0].ticks.min=min-offset；
}
});


更新3==================================

下面是一个插件，用于向图表中的所有Y轴添加偏移：

Chart.pluginService.register({
    beforeUpdate: function(chart){
      console.log("beforeUpdate");
      // get custom defined offset
      var offset = chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0
      if(!offset || offset < 0) return;
      var yAxes = chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        var axis = yAxes[i];
        var datasets = chart.data.datasets;
        var max = Number.MIN_VALUE;
        var min = Number.MAX_VALUE;
        var datasetsOnAxis = [];

        for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
          var dataset = datasets[j];
          var meta = chart.getDatasetMeta(j);
          if  (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset); 
        }

        for(var k=0; k<datasetsOnAxis.length; k++){
          var dataset = datasetsOnAxis[k]
          var newMax = Math.max.apply(null, dataset.data);
          var newMin = Math.min.apply(null, dataset.data);
          max = newMax > max ? newMax : max;
          min = newMin > min ? min : newMin;
        }
        axis.ticks.max = max + offset;
        axis.ticks.min = min - offset;   
      }
    }
});

Chart.pluginService.register({
更新前：功能（图表）{
控制台日志（“更新前”）；
//获取自定义的偏移量
var offset=chart.options.customOffset；
//如果偏移量未定义或小于0，则正常存在
如果（！offset | | offset<0）返回；
var yAxes=chart.options.scales.yAxes；
对于（var i=0；ii如果我为这些数据集设置了最小/最大值，如果我打开/关闭其中一个，图表将不会自动缩放。比例始终为最小/最大值。如果我有两个以上的数据集，而其他数据集的值非常小，那么当我关闭大数据集时，Y轴不会自动缩放。例如，codepen.io/anon/pen/KygeRw这里是codepen。如果我使用通过单击da从图表中删除数据集1和数据集2