Question

我想按Chartjs绘制折线图，按日显示数据，但按月标记。

如果标签按天显示，则有很多分数。所以，我想按月而不是按天显示标签。例如：

enter image description here

有人可以教我怎么做吗？

谢谢。

Answer 1

只需将您的xAxes-＆gt;时间属性配置为：
单位：＆＃39;月＆＃39;

＆＃13;

xAxes: [{
  type: 'time',
  position: 'bottom',
  time: {
    displayFormats: {'day': 'MM/YY'},
    tooltipFormat: 'DD/MM/YY',
    unit: 'month',
   }
}],

＆＃13;

Answer 2

labels数组和data数组必须匹配。因此，您需要做的是计算要保存在数据数组中的值以匹配您的标签

data: {
    labels: ["Jan", "Feb", "March", ...],
    datasets: [{
        label: '# of Votes',
        data: [01, 02, 03, ...],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            ...
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            ...
        ],
        borderWidth: 1
    }]
},

这会解决你的疑问吗？

Answer 3

这个问题现在很老了，但我找到了使用afterTickToLabelConversion功能的解决方法。我格式化了日期，每个月只留下一个标签（其余标签转换为空引号）以下是放入图表选项的代码段：

scales: {
        xAxes: [{
            type: 'time',
            position: 'bottom',
            time: {
                displayFormats: {
                    'day': 'MM/YY'
                },
                tooltipFormat: 'DD/MM/YY',
                unit: 'day',
            },
            // leave only one label per month
            afterTickToLabelConversion: function (data) {
                var xLabels = data.ticks;
                var oldLabel = "";
                xLabels.forEach(function (labels, i) {
                    if(xLabels[i] == oldLabel){
                        xLabels[i] = "";
                    } else {
                        oldLabel = xLabels[i];
                    }
                });
            }
        }]
    }

ChartJS - 按月绘制带有标签的图表，按天绘制数据

3 个答案: