我正在使用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轴刻度,图表会保持比例吗?如果这是有道理的,那个函数会是什么样子?
1 回答
事实证明这比我预期的要简单 . 我没有在Chart.js中找到任何相关选项,但是我编写了一个简单的函数来将数据点映射到0到1000的比例,这会创建一个y轴相同的图表,这意味着图表总是如此在全高处绘制 .
这是功能:
Updated CodePen here .