Chart.JS 工具提示颜色在饼图中无法按预期工作。如何解决？答案

【问题标题】：Chart.JS tooltip color doesn't works as expected in pie chart. How to solve it?Chart.JS 工具提示颜色在饼图中无法按预期工作。如何解决？
【发布时间】：2017-10-05 13:23:19
【问题描述】：

我正在我的仪表板页面中创建一个饼图。首先，我已经创建了一个条形图并且一切正常，但是现在，当我创建一个饼图时，我的工具提示没有按预期工作。

我的代码：

 <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

【问题讨论】：

标签： html canvas chart.js chart.js2

【解决方案1】：

您只需将工具提示 bodyFontColor 值设置为白色 (#FFfFFF)

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

这是查看结果的小提琴链接：https://jsfiddle.net/xf7nx5nc/

【讨论】：