调整ChartJS中的X轴步骤

时间:2016-11-17 07:09:45

标签: javascript php

我在ChartJS上工作。我有一些值根据数据库的小时和日期保存。我想按小时调整X轴。现在,我所有的时间和分钟都在X轴上显示,我想要显示几小时。我在PHP文件中编写了一个脚本。但什么都没发生。如何更改X轴步骤?

这是我的脚本代码:

<script>

$(document).ready(function(){

 var data = <?php echo json_encode($data) ?>;


        var gun= [];
        var guc = [];
        var saat = [];
        var hour = [];
        for(var i in data) {
            gun.push(data[i].gun);
            guc.push(data[i].Guc);
            saat.push(data[i].saat);
            hour.push(data[i].hour);
        }

        var chartdata = {
            labels: saat,
            datasets: [
                {label: "Güç",
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(211, 72, 54,0.5)", 
                    borderColor: "rgba(211, 72, 54, 1)", 
                    pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                    pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                    steppedLine: true,
                    data: guc

                }

            ]

        };

        var ctx = $("#mycanvas7");

        var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata,
            options: {
                min: 0,
                max: 23,
                stepSize: 24
            }

        });
});     
</script>

1 个答案:

答案 0 :(得分:2)

xAxes: [{
  ticks: {
    autoSkip: true,
    maxTicksLimit: 24
  }
}]

这对我有帮助