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

Question

我正在与 Chart.js 合作一个项目，其中我：

用两个全为零的初始数据集实例化折线图。
从 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 轴的比例（请注意数据点 1001 代替 [=14= 中的 90 ]).该图表通过将最大 y 值设置为 2000 进行补偿，因此近一半的垂直轴现在是空的。

如何修改此行为以始终尽可能多地填充图表？在我的项目中，我隐藏了 y 轴标签，所以我不关心它们是否是整数值；我希望最大图表值是 1001，而不是 2000，并且图表可以填充可用的垂直 space.

我在 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.

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

How to ensure that a Chart.js line chart uses all space available on the y-axis?

javascript

charts

graph

linechart

chart.js