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 in代替this example中的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

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

1 个答案: