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