在现有数据集值上设置画布限制

Question

我的html5画布有点问题。我已经制作了几个折线图，但他们遇到了最大网格值的问题（画布本身内部的字段限制）。该图表是根据来自数据库的数据集构建的，只能通过这些值构建。

示例：示例图表

正如你在这里看到的，上面的限制是5.55，问题是如何将其更改为更大的值（例如，使用这样的最大值的百分比或其他东西，以便其他图表的偏移量也匹配）？

代码：

$('#graf_' + i + '').html('<canvas id="lineChart' + i + '" width="' + $(".graf").width() + '" height="200"></canvas>');

var lineData = {
    labels: data["headers"],
    datasets: [{
        label: data["rates"][i]["VltName"],
        fillColor: "transparent",
        strokeColor: data["rates"][i]["VltColor"],
        pointColor: data["rates"][i]["VltColor"],
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: getRatesArr
    }]
};
var lineOptions = {
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    scaleGridLineWidth: 1,
    bezierCurve: false,
    pointDot: true,
    pointDotRadius: 4,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 20,
    datasetStroke: true,
    datasetStrokeWidth: 2,
    datasetFill: true
};


var ctx = document.getElementById("lineChart" + i).getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

希望我的解释不是太模糊。提前谢谢！

Answer 1

如果您更新到最新的Chart.js版本（当前为v2.6.0），您可以使用max刻度配置选项设置要在轴上显示的最大数量：

options: {
    scales: {
        yAxes: [{
            ticks: {
                max: yourMaxNum
            }
        }]
    }
}

如果要将yourMaxNum设置为所有数据集数组中的最大数字，只需使用JavaScript Math.max()方法确定此数字，并将上面的图表配置选项设置为此数字创建所有折线图。

Chart.js documentation列出了您可能也觉得有用的其他刻度配置选项。