首页 文章

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

提问于
浏览 次
0

我正在使用Chart.js开展项目，其中我：

  • 使用两个全零的初始数据集实例化折线图 .

  • 从API加载一些数据，然后使用新的实际数据更新两个数据集 .

请看_11706204_ . 这是代码：

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);

这很好，但是根据我得到的数据，图表's y-axis scale can change. That'的预期行为，但是如果一个数据点是一个异常值并且比其余数据高出一个数量级，它可以甩掉图表的y轴比例（注意在this example中数据点1001代替90） . 图表通过将最大y值设置为2000进行补偿，因此近一半的垂直轴现在为空 .

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

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

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

javascript graph charts linechart chart.js

1 回答

  • 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 .

    回复于

相关问题