Question

我使用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,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
    datasets: [
        {
            fill: false,
            data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
            lineTension: 0,
        },
        {
            fill: false,
            data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
            lineTension: 0,
        }
    ]
};
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
});

Answer 1

我已使用 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,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
    datasets: [
        {
            fill: false,
            data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
            lineTension: 0,
        },
        {
            fill: false,
            data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
            lineTension: 0,
        }
    ]
};
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,
                max: 190,
               stepSize: 10
            }
        }],
    },
};
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Answer 2

为了仅显示出现在数据集中的日期，请使用设置为 distribution 的 'series' 属性。这将导致点之间的距离相等，从而消除多余的间隙。注意：不幸的是，这仅适用于时间序列数据。如果您希望为不同值或不同轴的给定数据点生成标签，请使用上面提供的答案，使用 autoSkip 属性和回调函数。

示例：

options: {
  scales: {
    xAxes: [{
      type: 'time',
      distribution: 'series',
      time: {
        unit: 'day'
      }
    }]
  }
}

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

2 个答案: