javascript – Chart.js 2 – 标签重叠

前端之家收集整理的这篇文章主要介绍了javascript – Chart.js 2 – 标签重叠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在将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',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
                }
            }
        ]
    }
};

任何帮助将非常感激.

解决方法

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

只需将minRotation:30添加到ticks:{}对象.

ticks: {
           fontFamily: 'Lato',minRotation: 30
         }
原文链接:https://www.f2er.com/js/157537.html

猜你在找的JavaScript相关文章