我的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);
希望我的解释不是太模糊。提前谢谢!
答案 0 :(得分:0)
如果您更新到最新的Chart.js版本(当前为v2.6.0),您可以使用max
刻度配置选项设置要在轴上显示的最大数量:
options: {
scales: {
yAxes: [{
ticks: {
max: yourMaxNum
}
}]
}
}
如果要将yourMaxNum
设置为所有数据集数组中的最大数字,只需使用JavaScript Math.max()
方法确定此数字,并将上面的图表配置选项设置为此数字创建所有折线图。
Chart.js documentation列出了您可能也觉得有用的其他刻度配置选项。