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
});

原文地址：https://www.jb51.cc/js/151012.html