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

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

本文关键字：空间 何确保 确保 折线图 js chart      更新时间：2023-09-26

我正在做一个project with Chart.js，其中我:

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

请看这个简化的例子。下面是代码:

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而不是90)。图表通过将最大y值设置为2000来进行补偿，因此几乎一半的垂直轴现在是空的。

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

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

另一个想法-也许我可以运行从API返回的值通过某种函数将它们映射到值从1到100，或1到1000?这样，Chart.js理论上总是使用相同的y轴尺度，图表将保持比例?如果这说得通，那么这个函数是什么样的呢?

这比我想象的要简单。我在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;
};

此处更新CodePen

相关文章：