Question

如果选择01-05-2019并且最后日期是15-07-2019，我将使用ChartJS来显示日期数据...现在显示标签没有改善..当我选择长日期时如何改善标签

代码：

function initCharts(date, type){
        var timeOptions = {};
        var numberDays = [];
        if( type == 'month'){
            var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            numberDays = MONTHS;
            timeOptions = {
                parser: 'MMM YYYY',
                tooltipFormat: 'll',
                unit: 'month',
                unitStepSize: 1,
                displayFormats: {
                    'month': 'MMM YYYY'
                }
            }
        }else if (type == 'Week'){
            var numberWeek = moment('Y-12-28').format('W');
            for (var i=1; i <= numberWeek;i++){
                numberDays.push(moment().format('Y') + '-'+i);
            }
            timeOptions = {
                parser: 'YYYY-W',
                tooltipFormat: 'll',
                unit: 'week',
                unitStepSize: 1,
                displayFormats: {
                    'week': 'YYYY-W'
                }
            }
        }else {
            timeOptions = {
                parser: 'YYYY-MM-DD',
                tooltipFormat: 'll',
                unit: 'day',
                unitStepSize: 1,
                displayFormats: {
                    'day': 'YYYY-MM-DD'
                }
            }
            if(date){
                var dateUse = new Date(date);
                var secondDate = new Date($('#endDateOfChart').val());
                var diffDays = differenceBetweenDays(dateUse, secondDate);
            } else {
                var date = new Date();
                var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                var diffDays = differenceBetweenDays(firstDay, date);
                var dateUse = firstDay;
            }
            for(var i =0; i <= diffDays;i++){
                numberDays.push(newDateString(dateUse, i));
            }
        }
        console.log(numberDays);

        var ctx = $('.blog-overview-users');
        var color = Chart.helpers.color;
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: numberDays,
                datasets: [{
                    label: 'CA Marypop',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    fill: false,
                    data: [],
                }]
            },
            options: {
                title: {
                    text: 'CA Marypop'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: timeOptions,
                        scaleLabel: {
                            display: true,
                            labelString: 'Date'
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'value'
                        },
                    }]
                },
            }
        });
        return chart;
    }

屏幕：黄色无法改善且客户不清楚时的零件标签

enter image description here

Answer 1

您可能设置了太多选项。

请参见下面的一个简单示例，其中包含许多点，默认时间轴也不那么混乱（顺便说一句，该示例是从https://stackoverflow.com/a/54308643复制而来的：

let now = (new Date()).getTime(),
  minutes = [],
  days = [],
  options = {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  };

for (let i = 0; i < 100; i++) {
  minutes.push({
    x: now + (60000 * i),
    y: 10
  });
  days.push({
    x: now + (86400000 * i),
    y: 10
  });
}

new Chart(document.getElementById('canvas1'), {
  type: 'line',
  data: {
    datasets: [{
      data: minutes
    }]
  },
  options: options
});

new Chart(document.getElementById('canvas2'), {
  type: 'line',
  data: {
    datasets: [{
      data: days
    }]
  },
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

chartjs改进显示标签

1 个答案: