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 
     }