轴上的刻度不会自动缩小

Question

我使用的是chart.js，但在某些图表上，只有一些图表创建的y轴比例从0到100，而更合适的比例可能是80-100。这意味着所有线条都在顶部聚集。

如果您访问mbi.dajubox.com并选择“14天”，您可以看到我的意思。等待时间。当结果出现时，请点击第一个条目（Calderdale和Huddersfield NHS Foundation Trust），然后会出现图表。但这些线条在顶部成束。

如果我下到第15位（斯托克波特NHS基金会信托基金会），它会缩放轴。

生成它们的代码是相同的

var ctx = document.getElementById("myChart_"+provID).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {bezierCurve: false, multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"});

任何人都可以帮助我吗？

Answer 1

这是因为在您的数据中，您会收到null值以显示在图表中。 Chartjs的min函数只是Math.min的包装器，它将null视为0。

对此的修复可以是覆盖辅助函数calculateScaleRange

在你有Chart.js之后声明这个（或者直接对你的Chart.js应用小改动）

Chart.helpers.calculateScaleRange = function (valuesArray, drawingSize, textSize, startFromZero, integersOnly) {
     //Set a minimum step of two - a point at the top of the graph, and a point at the base
     var minSteps = 2,
         maxSteps = Math.floor(drawingSize / (textSize * 1.5)),
         skipFitting = (minSteps >= maxSteps);

     var maxValue =  Chart.helpers.max(valuesArray),
         minValue = Chart.helpers.min(valuesArray.map(function(value){
             //using map to create a new array where all nulls are mapped to Infinity so they do not pull the result down to 0
             return value === null ? Infinity: value;
         }));
        ................ //lots more code that is part of calculateScaleRange

这是一个完整的示例