Chart.js 2 - 标签重叠

Question

我使用Chart.js 2作为我的一个项目。我已经成功地设计了它的风格，但有一个问题似乎无法修复，而且让我感到紧张。

有时x轴上的最后一个标签是重叠的。

以下是我使用的选项：

$scope.colours = [
    {
        borderColor: '#FFF',
    },
    {
        borderColor: '#FAF6DD'
    },
    {
        borderColor: '#A5CCFE'
    }
];

$scope.options = {

    type: 'line',

    tooltips:
    {
        enabled: false
    },

    elements:
    {
        line:
        {
            borderWidth: 2,
            fill: false
        },
        point:
        {
            radius: 0,
            hoverRadius: 0
        }
    },

    scales: {
        yAxes: [
            {
                gridLines:
                {
                    display: true,
                    color: "#16a693"
                },
                ticks:
                {
                    fontFamily: 'Lato',
                    fontColor: "#fff",
                    fontSize: 14
                }
            }
        ],
        xAxes: [
            {
                type: 'time',
                ticks:
                {
                    autoSkip: true,
                    display: true,
                    autoSkipPadding: 15,
                    fontFamily: 'Lato',
                    fontColor: "#fff",
                    fontSize: 14,
                    maxRotation: 0
                },

                time:
                {
                    displayFormats:
                    {
                        'millisecond': 'HH:mm:ss',
                        'second': 'HH:mm:ss',
                        'minute': 'HH:mm:ss',
                        'hour': 'HH:mm:ss',
                        'day': 'HH:mm:ss',
                        'week': 'HH:mm:ss',
                        'month': 'HH:mm:ss',
                        'quarter': 'HH:mm:ss',
                        'year': 'HH:mm:ss'
                    }
                },
                gridLines:
                {
                    display: false
                }
            }
        ]
    }
};

非常感谢任何帮助。

Answer 1

我通过倾斜文本来解决这个问题，这样它们就不会重叠了。

只需将minRotation: 30添加到ticks：{} object。

  ticks: {
           fontFamily: 'Lato',
           fontColor: "#fff",
           fontSize: 14,
           minRotation: 30
         }