javascript – Chart.js:仅在x轴上显示数据点的标签

我正在使用Chart.js创建一个图表,并且我的折线图的x轴有问题.我已经制作了一个多线图,一切都很好看,如下图所示.
我想要实现的是,当图表上有数据点时,我的x轴上的标签(日期)才会显示,所以现在不是所有的日子.我对整个Web开发工作没有那么多经验,所以任何帮助都会受到赞赏.提前致谢.

我的代码如下:

function newDate(day,month) {
  return moment().date(day).month(month);
}

var ctx = document.getElementById("chart_hr");
var tabPane = document.getElementById("overview_hr");
var data = {
    labels: [newDate(8,8),newDate(10,newDate(12,newDate(17,newDate(21,newDate(23,newDate(28,newDate(1,9),newDate(4,9)],datasets: [
        {
            fill: false,data: [140,180,150,170],lineTension: 0,},{
            fill: false,data: [80,100,80,100],}
    ]
};
var options = {
    scales: {
      xAxes: [{
        type: 'time',time: {
          displayFormats: {
            'millisecond': 'DD MMM','second': 'DD MMM','minute': 'DD MMM','hour': 'DD MMM','day': 'DD MMM','week': 'DD MMM','month': 'DD MMM','quarter': 'DD MMM','year': 'DD MMM',unitStepSize: 1,unit: 'day',gridLines : {
            display : false,}
      }],yAxes: [{
        ticks: {
            min: 50,max: 190,stepSize: 10,};
var myLineChart = new Chart(ctx,{
    type: 'line',data: data,options: options
});

解决方法

我通过使用ticks回调方法和设置autoSkip false解决了这个问题.但是,我没有使用Timescale.在回调中,您可以传递日期和所需格式,它将返回格式化日期.
下面是相同和工作示例代码的屏幕截图.

[样本代码]

var ctx = document.getElementById("chart_hr");
    function newDate(day,month) {
        return moment().date(day).month(month);
    }


var data = {
    labels: [newDate(8,}
    ]
};
var options = {
    scales: {
        xAxes: [{
            ticks: {
                autoSkip : false,callback: function(value,index,values) {
                    return new moment(value).format('DD MMM');
                }
            },gridLines : {
                display : false,}
        }],yAxes: [{
            ticks: {
                min: 50,stepSize: 10
            }
        }],options: options
});

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...