Chart.js:仅在 x 轴上显示数据点的标签 [英] Chart.js: only show labels on x-axis for data points

问题描述

我正在使用 Chart.js 制作图表，但在折线图的 x 轴方面存在问题.我制作了一个多折线图，一切看起来都很好，如下图所示.我想要实现的是，我的 x 轴(日期)上的标签仅在图表上有数据点时才会显示，因此并非像现在这样的所有日子.我在整个 Web 开发方面并没有太多经验，因此感谢您提供任何帮助.提前致谢.

I'm making a chart by using Chart.js and have a problem regarding the x-axis of my line chart. I have made a multi-line chart and everything is looking okay as you can see in the image below. What I would like to achieve is, that the labels on my x-axis (the dates) only gets shown when there is a data point on the chart, so not all the days as is now the case. I do not really have that much experience with the whole web development thing, so any help is appreciated. Thanks in advance.

我的代码:

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

推荐答案

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

I have solved this problem by using ticks callback method and by setting autoSkip false. However, I am not using Timescale. In callback, you can pass your date and the desired format it will return the formatted date.
Below is the screenshot for the same and the working sample code.

[示例代码]

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

这篇关于Chart.js:仅在 x 轴上显示数据点的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！