Laravel中的Chartjs缩放输出

时间:2017-02-05 12:18:52

标签: laravel scale chart.js

我从数据库中获取一些时间明智的数据并将其返回到chartjs,我能够看到输出。问题是图表显示了所有值(x轴)及其相应的输出。图表如下所示:

ChartJs

我希望X轴位于特定范围内,例如

  • 2017-01-07 10:10:10
  • 2017-02-07 10:10:10
  • 2017-03-07 10:10:10
  • 2017-04-07 10:10:10
  • 2017-05-07 10:10:10

即,我想组织数据。

ChartJs代码

<canvas id="myChart2" width="600" height="250"></canvas>
                <script>

                    $(function(){
                      $.getJSON("/chart/data", function (result) {

                        var labels = [],data=[];
                        for (var i = 0; i < result.length; i++) {
                            labels.push(result[i].month);
                            console.log(result[i].month);
                            data.push(result[i].projects);
                        }

                        var buyerData = {
                          labels : labels,
                          datasets : [
                            {
                              fillColor : "rgba(240, 127, 110, 0.3)",
                              strokeColor : "#f56954",
                              pointColor : "#A62121",
                              pointStrokeColor : "#741F1F",
                              data : data
                            }
                          ]
                        };
                        var buyers = document.getElementById("myChart2");

                        var myNewChart = new Chart(buyers , {
                            type: "line",
                            data: buyerData,
                            options: {
                                scales: {
                                    xAxes: [{
                                        type: 'time',
                                        time: {
                                            displayFormats: {
                                                minute:'h:mm:ss a'
                                            }
                                        }
                                        ,stepSize:10
                                    }]
                                }
                            }
                        });

                      });

                    });


                </script>

0 个答案:

没有答案