javascript - 如何确保 Chart.js 折线图使用 y 轴上的所有可用空间？

Question

我正在使用 Chart.js 开发一个项目，其中我:

1. 使用两个全为零的初始数据集实例化折线图。
2. 从 API 加载一些数据，然后使用新的实际数据更新两个数据集。

请参阅此simplified example 。代码如下:

var context = $('#myChart').get(0).getContext('2d'),
    newData = [
      [65, 59, 80, 81, 55],
      [28, 48, 40, 19, 90]
    ],
    initialData = {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [
        {
            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: [0, 0, 0, 0, 0, 0]
        },
        {
            fillColor: 'rgba(151, 187, 205, 0.2)',
            strokeColor: 'rgba(151, 187, 205, 1)',
            pointColor: 'rgba(151, 187, 205, 1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(151, 187, 205, 1)',
            data: [0, 0, 0, 0, 0, 0]
        }
      ]
    },
    myChart = new Chart(context).Line(initialData);

setTimeout(function() {
  var i, j;
  for (i = 0; i < newData.length; i++) {
    for (j = 0; j < newData[i].length; j++) {
      myChart.datasets[i].points[j].value = newData[i][j];
    }
  }
  myChart.update();
}, 2000);

效果很好，但根据我返回的数据，图表的 y 轴比例可能会发生变化。这是预期的行为，但如果一个数据点是异常值，并且比其他数据点高出一个数量级，则它可能会偏离图表 y 轴的比例(请注意 this example 中的数据点 1001 代替 90) 。该图表通过将最大 y 值设置为 2000 进行补偿，因此现在垂直轴的近一半是空的。

如何修改此行为以始终尽可能填充图表？在我的项目中，我隐藏了 y 轴标签，所以我不在乎它们是否不是圆形值；我希望图表的最大值为 1001，而不是 2000，并且让图表填充可用的垂直空间。

我在Chart.js docs中没有看到任何允许这种行为的选项。 。我现在正在查看源代码，看看是否可以修改它。

另一个想法 - 也许我可以通过某种函数运行从 API 返回的值，将它们映射到 1 到 100 或 1 到 1000 的值？这样，Chart.js 理论上将始终使用相同的 y 轴刻度，并且图表将保持比例？如果这是有道理的，那么这个函数会是什么样子？

Answer 1

结果比我想象的要简单。我在 Chart.js 中没有找到任何相关选项，但我编写了一个简单的函数来将数据点映射到从 0 到 1000 的刻度，这会创建一个具有相同 y 轴的图表，这意味着图表始终以全高绘制。

这是函数:

var mapDataPoints = function(dataPoints) {
  var i, 
      max = Math.max.apply(null, dataPoints), 
      newDataPoints = [];

  for (i = 0; i < dataPoints.length; i++) {
    results.push((dataPoints[i] / max) * 1000);
  }

  return results;
};

Updated CodePen here .