javascript - Charts.js 动态报价

Question

我正在使用 Charts.js 并用它来显示不同时间段的数据，时间段基于用户输入。我在 x 轴上显示日期标签，但有时这些标签的范围可能是 0-12 个月。我想动态更改此设置，以便如果日期范围超过 2 个月，那么标签将每月显示？此外，该范围内的数据将按月分组。就像使用 Google Analytics 时一样。

下面是我用来生成图表的 JavaScript。

<script>
            var ctx = document.getElementById('directtraffic').getContext('2d');
            var directtraffic = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ["2017-05-01","2017-05-02","2017-05-03","2017-05-04","2017-05-05","2017-05-06","2017-05-07","2017-05-08","2017-05-09","2017-05-10","2017-05-11","2017-05-12","2017-05-13","2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20","2017-05-21","2017-05-22","2017-05-23","2017-05-24","2017-05-25","2017-05-26","2017-05-27","2017-05-28","2017-05-29","2017-05-30","2017-05-31"],
                    datasets: [{
            label: 'Sessions (01/05/2017 - 31/05/2017)',
            data: ["169","278","287","223","252","129","97","246","266","285","262","203","107","121","319","261","336","291","227","110","94","237","263","259","239","172","79","77","111","257","233"],
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            legend: {
                display: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            backgroundColor: '#5cbae6',
            borderColor: '#5cbae6',
            fill: false
        },{
            label: 'Sessions (01/04/2017 - 30/04/2017)',
            data: ["103","100","261","280","258","250","197","70","94","248","206","239","198","113","113","108","99","248","245","250","225","107","86","244","245","268","299","223","98","119"],
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            legend: {
                display: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            backgroundColor: '#b6d957',
            borderColor: '#b6d957',
            fill: false
        }]
                },
                options: {
                    animation: false,
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display:false
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display:false
                            }  
                        }]
                    }
                }
            });
            </script>

Answer 1

如果我正确理解您的问题，您将需要在刻度下添加刻度，在您的情况下添加 xAxes。您可以在刻度中指定步长。步长是每次增加多少。在步长中，您可以调用确定所需步长的函数。因此，您可以创建一个名为 calcualteStepSize 的函数，并传入日期(如果超过 2 个月)，然后返回步长大小 1。下面是一些伪代码

ticks: {
        stepSize: calcualteStepSize(data)
       }

function calcualteStepSize(data) {
  if data range is greater than 2 months
    return 1 
  else return some other calculation
}