Chart.JS 툴팁 색상이 원형 차트에서 예상대로 작동하지 않습니다. 그것을 해결하는 방법?

Question

대시 보드 페이지에서 파이 차트를 만들고 있습니다. 먼저 막 대형 차트를 만들었고 모든 것이 제대로 작동하지만 지금은 원형 차트를 만드는 동안 툴팁이 예상대로 작동하지 않습니다.

내 코드 :

<canvas id="pie-chart" height="213"></canvas> 

     <!-- ChartJS --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 

    <script> 

     var ctx2 = document.getElementById('pie-chart').getContext('2d'); 

     var green_darkgreen_gradient = ctx2.createLinearGradient(0, 0, 0, 150); 
     green_darkgreen_gradient.addColorStop(0, '#16D99B'); 
     green_darkgreen_gradient.addColorStop(1, '#22A77C'); 

     var red_darkred_gradient = ctx2.createLinearGradient(0, 0, 0, 150); 
     red_darkred_gradient.addColorStop(0, '#F22626'); 
     red_darkred_gradient.addColorStop(1, '#BE1111'); 

     var yellow_darkyellow_gradient = ctx2.createLinearGradient(0, 0, 0, 150); 
     yellow_darkyellow_gradient.addColorStop(0, '#DFD337'); 
     yellow_darkyellow_gradient.addColorStop(1, '#C5B929'); 


     var pieChart = new Chart(ctx2,{ 
      type: 'pie', 
      data: { 
       labels: ['Aberto', 'Fechado', 'Transferido'], 
       datasets: [{ 
        data: [7, 10, 15], 
        backgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient], 
        hoverBackgroundColor:[green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient], 
        hoverBackgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient], 
        hoverBorderWidth: 0, 
        hoverBorderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient], 
        borderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient] 

       }] 
      }, 
      options: { 
       legend: { 
        display: false, 
        labels: { 
         fontColor: "#000", 
         fontSize: 18 
        } 
        }, 
        tooltips: { 
         backgroundColor: '#000', 
         titleFontSize: 16, 
         ttitleFontColor: '#0066ff', 
         bodyFontColor: '#000', 
         bodyFontSize: 14, 
         displayColors: false 
        }, 
        backgroundColor: '#000', 
        titleFontSize: 16, 
        titleFontColor: '#ddd', 
        bodyFontColor: '#ddd', 
        bodyFontSize: 14, 
        displayColors: false 
       } 

     }); 

는 막대 차트와 결과 (기본적으로 동일한 코드를) 참조 : 원형 차트 Bar chart with tooltip

보기 결과 : Pie chart with tooltip

Answer 1

당신이해야 할 모든 단지 세트 툴팁 bodyFontColor 흰색 (#FFFFFF)에 값

다음

.... 
tooltips: { 
    backgroundColor: '#000', 
    bodyFontColor: '#FFFFFF', 
    bodyFontSize: 14, 
    displayColors: false 
} 
... 

결과를 볼 수있는 바이올린 링크입니다 : https://jsfiddle.net/xf7nx5nc/

가