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: {
           fontFamily: 'Lato',
           fontColor: "#fff",
           fontSize: 14,
           minRotation: 30
         }