如何在chart.js折线图中设置x和y轴的比例

Question

我正在使用chart.js来查询sql server并在图表上显示数据。我在x轴上有时间间隔，在y轴上我有浮点数据。图表显示不错但时间间隔持续显示。我希望时间刻度为30分钟，并且浮动为10。

<script type="text/javascript">
        $(document).ready(function () {
            $("#btn_line_chart").on('click', function () {
                var mb_one = $("#ddl_one").val() + " " + $("#ddl_one_time").val();
                var mb_two = $("#ddl_two").val() + " " + $("#ddl_two_time").val();


                var jsonData = JSON.stringify({
                    mobileId_one: mb_one,
                    mobileId_two: mb_two

                });

                $.ajax({
                    type: "POST",
                    url: "sampleservice.asmx/getLineChartData",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                });

                function OnSuccess_(reponse) {
                    var aData = reponse.d;
                    var aLabels = aData[0];
                    var aDatasets1 = aData[1];
                    var aDatasets2 = aData[2];

                    var data = {
                        labels: aLabels,
                        datasets: [{
                            label: "My First dataset",
                            fill:false,
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            backgroundColor: "rgba(75,192,192,0.4)",
                            borderColor: "rgba(75,192,192,1)",
                            data: aDatasets1
                        },
                         {
                             label: "My Second dataset",
                             fill: false,
                             fillColor: "rgba(151,187,205,0.2)",
                             strokeColor: "rgba(151,187,205,1)",
                             pointColor: "rgba(151,187,205,1)",
                             pointStrokeColor: "#fff",
                             pointHighlightFill: "#fff",
                             pointHighlightStroke: "rgba(151,187,205,1)",
                             backgroundColor: "rgba(255,0,0,0.4)",
                             borderColor: "rgba(255,0,0,1)",
                             data: aDatasets2
                         }]
                    };

                    var ctx = $("#myChart").get(0).getContext('2d');
                    ctx.canvas.height = 300;  // setting height of canvas
                    ctx.canvas.width = 300; // setting width of canvas
//                    var lineChart = new Chart(ctx).Line(data, {
//                        bezierCurve: false
                    //                    });//bezierCurve: false,
                    var lineChart = new Chart(ctx, {
                                    type: "line",
                                    data: data
                                    });
                }
                function OnErrorCall_(repo) {
                    alert(repo.toString());
                    alert("Woops something went wrong, pls try later !");
                }
            });
        });
//        window.onload = function () {
//            var ctx = document.getElementById("canvas").getContext("2d");
//            window.myLine = new Chart(ctx).Line(lineChartData, {
//                scaleOverride: true,
//                scaleSteps: 10,
//                scaleStepWidth: 50,
//                scaleStartValue: 0
//            });
//        }
    </script>