Javascript 设置对现有数据集值的画布限制

Javascript 设置对现有数据集值的画布限制,javascript,html,chart.js,Javascript,Html,Chart.js,我对html5画布有点小问题。我已经制作了一些折线图,但是它们在最大网格值(画布内部的字段限制)方面存在问题。图表是从数据库中的数据集生成的,并且仅通过这些值生成 示例:示例图表 正如您在这里看到的,上面的限制是5.55,问题是如何将其更改为更大的值(例如,使用此类最大值的百分比或其他东西,以便其他图表的偏移也匹配) 守则: $('#graf_' + i + '').html('<canvas id="lineChart' + i + '" width="' + $(".graf").w

我对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);
$('#graf'+i+'').html('';
变量lineData={
标签:数据[“标题”],
数据集:[{
标签:数据[“费率”][i][“VltName”],
fillColor:“透明”,
strokeColor:data[“rates”][i][“VltColor”],
pointColor:data[“rates”][i][“VltColor”],
pointStrokeColor:“fff”,
pointHighlightFill:“fff”,
pointHighlightStroke:“rgba(2201)”,
数据:getRatesArr
}]
};
变量行选项={
scaleShowGridLines:对,
scaleGridLineColor:“rgba(0,0,0,05)”,
scaleGridLineWidth:1,
贝塞尔曲线:错,
是的,
点半径:4,
pointDotStrokeWidth:1,
PointHit检测半径:20,
datasetStroke:对,
datasetStrokeWidth:2,
datasetFill:true
};
var ctx=document.getElementById(“线形图”+i).getContext(“2d”);
var myNewChart=新图表(ctx).Line(lineData,lineOptions);

希望我的解释不要太含糊。提前谢谢

如果更新到最新的Chart.js版本(当前),可以使用
max
勾选配置选项设置要在轴上显示的最大编号:

options: {
    scales: {
        yAxes: [{
            ticks: {
                max: yourMaxNum
            }
        }]
    }
}
如果要将
yourMaxNum
设置为所有数据集数组中的最大值,只需使用JavaScript方法确定该值,并在创建所有折线图时将上述图表配置选项设置为该值

列出了您可能也会觉得有用的其他配置选项