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

桑杰·杜特(Sanjay Dutt)

我已经通过使用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
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章