Chartjs最后一个标签未显示

时间:2017-02-13 13:33:03

标签: javascript graph chart.js

[更新]问题似乎已经解决(见评论)。一旦我确定,我会立即更新答案

我正在尝试使用 chartjs 库来创建天气图。 图表将始终具有该月第一天的天气日期,并且除了中间的一个值之外(使得24个值)。 我想要显示所有“月份的第一天”标签(使用相应的网格线),不应显示其间的其他数据点(或至少不显示网格线)。 问题现在,不知何故,最后(第12个)标签不会被显示,我不明白为什么。结果如下:

graph

我的javascript代码就是那个

 var ctx = document.getElementById('canvas').getContext('2d');

    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [
            "01","","02","","03","","04", "","05","","06","","07","","08","","09","","10","","11", "","12",""
        ],
        datasets: [{
          label: 'Temperature [°C]',
          data: [
              1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6
          ],
          borderColor: "rgb(0, 182, 206)",
            pointRadius: 1,
            backgroundColor: "rgba(0, 182, 206,0.4)"
        }]
      },
      options: {
            responsive: true,
            maintainAspectRatio: false,
            legend:{
                display:false   // Suppress interactive legend
            },
            scales: {
                    xAxes: [{
                      scaleLabel: {
                        display: false,
                        labelString: 'Month'
                      } ,
                    afterTickToLabelConversion: function(data){
                            var xLabels = data.ticks;
                            xLabels.forEach(function (labels, i) {
                                if (xLabels[i].length == 0){
                                    xLabels[i] = '';
                                }
                            });
                        },
                        ticks: {
                            //maxRotation: 0,
                            //minRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 12
                        }
                    }],
                    yAxes: [{
                      scaleLabel: {
                        display: true,
                        labelString: 'Temperature [°C]'
                      },
                        ticks: {
                            beginAtZero: true
                        }
                    }]

            }
        }

    });

你有什么想法吗?

0 个答案:

没有答案