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

时间:2017-06-27 05:25:32

标签: javascript html5 chart.js

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

示例:示例图表

sample chart

正如你在这里看到的,上面的限制是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);

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

1 个答案:

答案 0 :(得分:0)

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

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

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

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